feat(shapes): add folder, bucket, console and browser shapes

[filipsajdak]

Summary

Adds four general-purpose flowchart shapes - folder (alias directory), bucket, console (a terminal window) and browser - usable via A@{ shape: folder } etc., in both the classic and handDrawn looks.

These started as C4-specific shapes in #7842. Review feedback there asked for them to move out of that PR and come back as first-class shapes usable from flowcharts and other diagrams, so that is what this PR does. It is part of the C4 modernization plan tracked in #7849 but fully independent of the C4 stack; once this and #7842 both land, a small follow-up rewires the C4 $shape/$sprite keywords to these shapes.

Naming question

terminal is already an alias of stadium, so the terminal-window shape is registered as console. Happy to rename if you would prefer something else (e.g. terminal-window).

What each shape gets

• self-sizing from the label, honoring explicit width/height independently per axis
• a handDrawn variant (rough.js container, plain SVG decorations)
• folder uses a polygon intersect matching its outline; the others use rect
• decoration colors come from themeVariables (nodeBorder/lineColor) instead of scraping node styles
• registry entries drive the generated shapes doc table
• tests: alias assertions in nodes.spec.ts and flowchart-shape-alias.spec.ts, plus a newShapes.spec.ts set (classic + handDrawn, labels, long labels, markdown, styles)
• one minor changeset

Review by commit: one commit per shape, then a test + docs commit.

Prepared with assistance from Claude Code; all changes reviewed and tested by a human.

Review summary

🎉 Adds four new Mermaid flowchart node shapes usable via A@{ shape: ... }—folder (alias directory), bucket, console (terminal window), and browser—including shape registration/aliasing, classic + handDrawn rendering, theme-variable–driven decoration colors, and shape-specific geometry (folder/bucket use polygon-style outline intersection; console/browser use rectangle intersection). Includes updated syntax/docs, a minor changeset, and Cypress + unit tests covering aliasing, label variants (including long labels and markdown), and multiple looks/directions.

Findings

No blocking or important issues identified. The Cypress suite explicitly adds aliasSet42 = ['folder','directory'] and covers newShapesSet7 = ['folder','bucket','console','browser'], including long-label and markdown htmlLabels cases.

Security
A targeted scan of the new/modified shape renderer files (folder.ts, bucket.ts, console.ts, browser.ts) did not surface common XSS/injection sink patterns (e.g., innerHTML/outerHTML, foreignObject, on* handlers, <script>, eval/Function, or javascript: URLs).

Notes on test stability

The PR also includes Argos sheet-batching/grouping adjustments (scripts/argos-batch-sheets*.ts) to prevent unrelated snapshot churn when adding new rendering specs.

Verdict

APPROVE

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	9f49de6
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a6e532ed7a60c0008284ed5
😎 Deploy Preview	https://deploy-preview-7970--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9f49de6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7970

mermaid

npm i https://pkg.pr.new/mermaid@7970

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7970

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7970

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7970

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7970

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7970

commit: 9f49de6

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Changes

Flowchart shape expansion

Layer / File(s)	Summary
Shape renderer implementations packages/mermaid/src/rendering-util/rendering-elements/shapes/*	Adds folder, bucket, console, and browser SVG renderers with geometry, labels, styling, intersections, and hand-drawn rendering.
Shape registry integration packages/mermaid/src/rendering-util/rendering-elements/shapes.ts	Registers the new renderers and the person shape with metadata, aliases, and handlers.
Coverage and shape documentation cypress/integration/rendering/*, packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts, packages/mermaid/scripts/docs.spec.ts, docs/syntax/flowchart.md, .changeset/general-shapes.md	Extends rendering and alias tests, updates documentation expectations and tables, and records the minor release changeset.

Argos screenshot grouping

Layer / File(s)	Summary
Screenshot group-key derivation and coverage scripts/argos-batch-sheets.ts, scripts/argos-batch-sheets.spec.ts	Adjusts shallow Cypress spec grouping and tests grouping for specs directly under top-level categories.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Flowchart
  participant ShapeRegistry
  participant ShapeRenderer
  participant SVG
  Flowchart->>ShapeRegistry: Resolve folder, bucket, console, or browser
  ShapeRegistry->>ShapeRenderer: Invoke registered renderer
  ShapeRenderer->>SVG: Draw shape and label
  ShapeRenderer->>Flowchart: Set bounds and intersection handler

Loading

Possibly related PRs

• mermaid-js/mermaid#7842: Adds another shape through the shared shape registry and related documentation snapshots.
• mermaid-js/mermaid#7883: Updates the shared shape registry used by related rendering flows.
• mermaid-js/mermaid#7972: Extends the same flowchart shape-alias snapshot aggregation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title concisely and accurately summarizes the main change: adding four new shapes.
Description check	✅ Passed	The description covers the feature, design decisions, tests, and changeset, but it omits the issue reference and the required task checklist section.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 57.09343% with 124 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.81%. Comparing base (19563d8) to head (9f49de6).
⚠️ Report is 30 commits behind head on develop.

Files with missing lines	Patch %	Lines
...endering-util/rendering-elements/shapes/browser.ts	43.42%	40 Missing and 3 partials ⚠️
...endering-util/rendering-elements/shapes/console.ts	51.72%	25 Missing and 3 partials ⚠️
...rendering-util/rendering-elements/shapes/bucket.ts	57.14%	24 Missing and 3 partials ⚠️
...rendering-util/rendering-elements/shapes/folder.ts	56.66%	24 Missing and 2 partials ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #7970      +/-   ##
===========================================
+ Coverage    77.61%   77.81%   +0.19%     
===========================================
  Files          567      572       +5     
  Lines        74906    75515     +609     
  Branches     14619    14811     +192     
===========================================
+ Hits         58141    58760     +619     
+ Misses       15768    15704      -64     
- Partials       997     1051      +54     

Flag	Coverage Δ
e2e	72.00% <91.26%> (+1.41%)	⬆️
unit	74.75% <17.30%> (-0.25%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...id/src/rendering-util/rendering-elements/shapes.ts	100.00% <100.00%> (ø)
scripts/argos-batch-sheets.ts	85.41% <100.00%> (+1.04%)	⬆️
...rendering-util/rendering-elements/shapes/folder.ts	56.66% <56.66%> (ø)
...rendering-util/rendering-elements/shapes/bucket.ts	57.14% <57.14%> (ø)
...endering-util/rendering-elements/shapes/console.ts	51.72% <51.72%> (ø)
...endering-util/rendering-elements/shapes/browser.ts	43.42% <43.42%> (ø)

... and 20 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts (1)

60-63: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Optimize measure phase by passing exact pre-computed bounds.

All four new shape renderers compute exact analytic dimensions but omit the knownBounds parameter when dispatching to updateNodeBounds. As noted in the upstream util.ts contract, relying on getBBox() triggers a synchronous layout reflow that drastically impacts performance on larger diagrams.

Because standard shapes have strictly known geometry, you can completely avoid the getBBox() penalty by passing the calculated dimensions conditionally (falling back to undefined only for handDrawn where roughjs shapes organically overflow their bounds).

• packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts#L60-L63: Replace the dead node.width/node.height assignments (which are immediately overwritten) and pass bounds to the update call:
  updateNodeBounds(node, folderShape, node.look !== 'handDrawn' ? { width: w, height: totalHeight } : undefined);
• packages/mermaid/src/rendering-util/rendering-elements/shapes/bucket.ts#L60-L60: Pass the conditionally known box:
  updateNodeBounds(node, group, node.look !== 'handDrawn' ? { width: w, height: totalHeight } : undefined);
• packages/mermaid/src/rendering-util/rendering-elements/shapes/console.ts#L62-L62: Pass the conditionally known box:
  updateNodeBounds(node, group, node.look !== 'handDrawn' ? { width: w, height: h } : undefined);
• packages/mermaid/src/rendering-util/rendering-elements/shapes/browser.ts#L82-L82: Pass the conditionally known box:
  updateNodeBounds(node, group, node.look !== 'handDrawn' ? { width: w, height: h } : undefined);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts`
around lines 60 - 63, Update updateNodeBounds calls in
packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts:60-63,
packages/mermaid/src/rendering-util/rendering-elements/shapes/bucket.ts:60-60,
packages/mermaid/src/rendering-util/rendering-elements/shapes/console.ts:62-62,
and
packages/mermaid/src/rendering-util/rendering-elements/shapes/browser.ts:82-82
to pass the precomputed width and height when node.look is not handDrawn, and
undefined otherwise. In folder.ts, remove the redundant node.width and
node.height assignments; use totalHeight for folder and bucket, and h for
console and browser.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/mermaid/src/rendering-util/rendering-elements/shapes/bucket.ts`:
- Around line 28-35: Update the top arc command in the bucket body path within
the body construction to use sweep-flag 0 instead of 1, making the filled body
extend to the back rim and occlude background elements while preserving the
unfilled top ellipse.

---

Nitpick comments:
In `@packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts`:
- Around line 60-63: Update updateNodeBounds calls in
packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts:60-63,
packages/mermaid/src/rendering-util/rendering-elements/shapes/bucket.ts:60-60,
packages/mermaid/src/rendering-util/rendering-elements/shapes/console.ts:62-62,
and
packages/mermaid/src/rendering-util/rendering-elements/shapes/browser.ts:82-82
to pass the precomputed width and height when node.look is not handDrawn, and
undefined otherwise. In folder.ts, remove the redundant node.width and
node.height assignments; use totalHeight for folder and bucket, and h for
console and browser.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3778e438-0f93-4562-9ec8-3d53c99e0b30

📥 Commits

Reviewing files that changed from the base of the PR and between f0ffb41 and cab05e7.

📒 Files selected for processing (11)

• .changeset/general-shapes.md
• cypress/integration/rendering/flowchart/flowchart-shape-alias.spec.ts
• cypress/integration/rendering/newShapes.spec.ts
• docs/syntax/flowchart.md
• packages/mermaid/scripts/docs.spec.ts
• packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.ts
• packages/mermaid/src/rendering-util/rendering-elements/shapes.ts
• packages/mermaid/src/rendering-util/rendering-elements/shapes/browser.ts
• packages/mermaid/src/rendering-util/rendering-elements/shapes/bucket.ts
• packages/mermaid/src/rendering-util/rendering-elements/shapes/console.ts
• packages/mermaid/src/rendering-util/rendering-elements/shapes/folder.ts

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Approved by pbrolin47	33 added	Aug 10, 2026, 2:10 PM

[filipsajdak]

About the scary-looking Argos diff on the first run (50 changed sheets, whole pages flipping between light and dark): none of it is a rendering change. All specs sitting directly under cypress/integration/rendering/ were batched into one big rendering sheet group, tiles sorted lexically and chunked 12 per sheet - so this PR's new tests inserted tiles mid-sequence and every tile after them shifted one slot, cascading through all following sheets (dark-theme tiles landing in slots that previously held light tiles produced the dramatic full-page diffs).

The latest commit fixes the batching itself: a spec directly under the top-level category now gets its own sheet group (subfolder groups like rendering/flowchart are unchanged), so a new test in one spec can no longer reshuffle another spec's sheets. One-time cost on the next CI run: the former flat rendering group's sheets are replaced by per-spec groups (removed + added in Argos); after that, this class of churn is gone for every future test-adding PR.

[pbrolin47]

Hi @filipsajdak ,
Thanks for this PR.
Some initial comments:

1. When using a triangle shape in flowcharts, the edge aligns to the edge of the triangle shape as shown in one of the screen-shots below.
2. An improvement would be if the edge aligns to the edge of the bucket-shape. In some cases, there is a gap. See the screen-shots below

[pbrolin47]

Note: There is some ongoing work with solving the problems with grid ordering when adding new tests, #7905.

[sisyphos-bot]

---

What's working well

🎉 Bucket body fill fix (PATCH 6/7) caught and fixed within the PR. Changing the top arc sweep from 0 0 1 to 0 0 0 makes the bucket opaque — the back-rim arc now closes the fill rather than the
front-rim arc. The commit message explains the bug clearly.

🎉 Folder uses polygon intersection, not rect. Using intersect.polygon(node, points, point) means edges connect to the actual L-shaped outline rather than the bounding box. The points array exactly
matches the path data, so the intersection is geometrically correct.

🎉 Decoration colors from theme variables. All three shapes that have visible decorations (bucket rim, console glyph, browser chrome dots/bar) use themeVariables?.nodeBorder ??
themeVariables?.lineColor ?? 'currentColor' — no hardcoded colors.

🎉 Visual regression coverage is comprehensive. newShapesSet7 exercises all 4 shapes across classic + handDrawn looks, default/long/markdown labels, and with styles. The alias pair folder/directory
gets its own Cypress alias set (aliasSet42).

---

Things to address

🟢 folder.ts — node.width and node.height pre-assignments are dead code (folder.ts:62-63)

// Current:
node.width = w;
node.height = totalHeight;
updateNodeBounds(node, folderShape); // always overwrites node.width and node.height

updateNodeBounds without knownBounds always calls getBBox() and overwrites the node dimensions — so the two lines above are unreachable in effect. For the non-handDrawn path, getBBox() returns the
same values so there's no functional difference. For the handDrawn path, the rough.js path can slightly overflow its nominal bounding box, which actually means removing these lines would leave the
DOM measurement (correct for rough). The right fix for the non-handDrawn path is to pass knownBounds:

if (node.look === 'handDrawn') {
updateNodeBounds(node, folderShape);
} else {
updateNodeBounds(node, folderShape, { width: w, height: totalHeight });
}

This skips the forced reflow on the non-handDrawn path (consistent with the optimization from PR #7951) and removes the confusing dead assignments. The other 3 shapes (bucket, console, browser)
already call updateNodeBounds(node, group) without pre-assignment, so this pattern is slightly inconsistent.

---

Pre-existing gap worth noting (out of scope for this PR)

💡 aliasSet40 (collate/hourglass) is declared but never added to aliasSets in flowchart-shape-alias.spec.ts. This predates this PR — aliasSet40 is defined on line ~88 but is absent from the
aliasSets array. Worth a follow-up so that alias pair gets visual regression coverage.

---

Security

XSS sub-agent review is in progress — will be posted as a follow-up once it completes. From direct code review: no .html() calls, no innerHTML, the only .text() call is hardcoded '>_' in console.ts,
and all decoration geometry is computed from bbox dimensions and theme variables. No concerns flagged during primary review.

---

[filipsajdak]

Thanks @pbrolin47! Fixed in af249fa - the bucket now computes edge intersections against its drawn outline (the rim's upper arc and the base's lower arc sampled into a polygon, joined by the tapered sides) instead of the bounding box; the same intersect.polygon approach the triangle and folder shapes use.

Before / after (zoomed on the rim - note the left and right arrowheads):

before	after

Full-diagram before/after plus the LR and hand-drawn looks are in this gallery.

Note: the push resets the pending Argos decision - the bucket sheets will show the expected edge-endpoint diffs.

[filipsajdak]

Thanks for the detailed review!

• folder updateNodeBounds: fixed in c6746ff exactly as suggested (knownBounds on the non-hand-drawn path, DOM measurement kept for the rough path). Verified the classic-look output stays pixel-identical.
• feat(e2e): append-only sheet order to stop composite-sheet churn #7905 / the batching commit: thanks for the pointer. d67edf0 here only regroups the flat rendering/ specs, which feat(e2e): append-only sheet order to stop composite-sheet churn #7905's append-only manifest supersedes (and feat(e2e): append-only sheet order to stop composite-sheet churn #7905 renames the script, so the two would conflict). I'll drop d67edf0 from this PR as soon as feat(e2e): append-only sheet order to stop composite-sheet churn #7905 merges so it applies cleanly - happy to drop it earlier if you or @sidharthv96 prefer.
• aliasSet40: opened test(flowchart): add the collate/hourglass alias pair to the alias suite #7972 adding the collate/hourglass pair to the alias suite.

[filipsajdak]

Gentle nudge (no rush) - @pbrolin47, whenever you have a moment: your review points here are addressed (bucket edges meet the drawn outline via polygon intersection, and the folder passes its known bounds to skip a reflow), and it's green on the required checks. A re-review would be very welcome. The argos build is stuck "queued" via the upstream e2e.yml shard-count bug (same one tracked on #7874), not a real diff. Thanks!

[filipsajdak]

@pbrolin47 - when you have a moment, this is ready for another look. Both points from your review were addressed on 17 July:

• Bucket edge gaps (af249fab1): intersect.rect replaced with intersect.polygon over a sampled outline - rim upper arc, tapered sides, base lower arc, 12 segments per arc - so edges meet the drawn shape instead of its bounding box.
• Dead width/height assignments in folder (c6746ffda): fixed with the knownBounds pattern you suggested; the classic-look output is pixel-identical.

The alias-suite gap you spotted alongside the review is #7972 (one line, independent of this PR).

One note on d67edf0f5 ("give flat rendering specs their own Argos sheet group"), which is still sitting in this branch: as promised, I will drop it as soon as @sidharthv96's #7905 merges, since that renames scripts/argos-batch-sheets.ts to scripts/screenshot-sheets.ts and supersedes it. #7905 is still open, so the commit stays for now to keep this PR's Argos grouping working.

[filipsajdak]

Merged current develop in, to pick up #7972 (merged 2026-07-31).

Worth a word on why this one needed it when the other open PRs did not. #7972 added aliasSet40 (collate/hourglass) to the aliasSets array in flowchart-shape-alias.spec.ts - the gap @pbrolin47 spotted while reviewing this PR. This branch touches the same array to register aliasSet42 (folder/directory), and predated that fix, so its copy of the array still had the hole. GitHub reported the PR as mergeable either way, since the two additions sit on adjacent lines and merge cleanly, but until now this branch's own e2e run was exercising a different alias list from develop's.

After the merge the array carries all three, and the diff against develop is purely additive again:

 const aliasSet40 = ['collate', 'hourglass'] as const;
 const aliasSet41 = ['datastore', 'data-store'] as const;
+const aliasSet42 = ['folder', 'directory'] as const;
...
   aliasSet40,
   aliasSet41,
+  aliasSet42,

No change to the shapes themselves. 643 unit tests pass, tsc clean.

Still outstanding here and unchanged: once @sidharthv96's #7905 lands, we drop the Argos sheet-batching commit (d67edf0f5) from this branch so #7905 applies cleanly. And this remains ready for a re-review whenever you have a moment, @pbrolin47 - your earlier points were addressed on 2026-07-17.

[filipsajdak]

Rebased onto current develop and tidied the history: 11 commits -> 6. No change to the shapes, and your review comments are untouched, @pbrolin47.

The two develop merges are gone, and the three follow-up fixes are folded into the shapes they fix - so each shape is now one commit that stands on its own, rather than "add bucket ... two commits later, fix bucket":

feat(shapes): add folder shape
feat(shapes): add bucket shape
feat(shapes): add console shape
feat(shapes): add browser shape
feat(shapes): register the folder, bucket, console and browser shapes
fix(e2e): give flat rendering specs their own Argos sheet group

The Argos sheet-group commit is deliberately kept last and separate, so it stays trivial to drop once @sidharthv96's #7905 lands - that commitment is unchanged.

The tree is byte-identical to the previous head: the series was rebuilt from that exact tree rather than replayed, and git diff <old head> <new head> was empty before pushing. 517 rendering-util tests pass, tsc clean.

[filipsajdak]

@pbrolin47 your 2026-07-17 points were addressed the same day: bucket edges now meet the drawn outline via polygon intersection, and folder passes known bounds so the measure pass skips a reflow. This has been waiting on a re-review since 2026-07-24.

The standing commitment is unchanged: the Argos sheet-batching commit carried here gets dropped as soon as #7905 lands, so it will not collide with @sidharthv96's append-only manifest. #7905 is still open, so it stays for now.

As with the other rendering PRs, the argos failure is unapproved intended diffs (four new shapes), not a broken test.

Full stack status: #7849 (comment)

[filipsajdak]

Thanks for the review!

One thing worth flagging before this merges, because it affects someone else's PR rather than this one. The top commit here, 9f49de65e fix(e2e): give flat rendering specs their own Argos sheet group, overlaps @sidharthv96's #7905 (append-only sheet order). #7905 is still open, and I said on this PR earlier that I would drop this commit once #7905 landed - but this PR now looks likely to merge first, so that ordering no longer works on its own.

It is deliberately the last commit on the branch, so removing it is a one-commit rebase. Either way suits me:

• Keep it. It is what stopped the composite-sheet churn on this branch, and argos is green here now. feat(e2e): append-only sheet order to stop composite-sheet churn #7905 would then need a small conflict resolution when it lands.
• Drop it. I push a version without it so feat(e2e): append-only sheet order to stop composite-sheet churn #7905 applies cleanly, and the sheet churn it addressed comes back on this branch until feat(e2e): append-only sheet order to stop composite-sheet churn #7905 merges.

Happy to do whichever you and @sidharthv96 prefer - just say which and I will push it. If I hear nothing I will leave the commit in place rather than change an approved PR under you.