@cardstack/boxel-cli 0.9.0-unstable.10 → 0.9.0-unstable.11

package/bundled-realms/base/command.gts

@@ -542,17 +542,26 @@ export class RunRealmCodeResult extends CardDef {
   @field shownCard = contains(StringField);
   @field showError = contains(StringField);
 
-  // A run that saved no files, took no captures, changed nothing in the room,
-  // asked for no UI action and asked to show no card, such as one that only
-  // read, has nothing for the chat to show. Its script result goes to the
-  // model only.
+  // The UI actions that failed. A UI action that was done is already visible
+  // in the app, so the chat lists only these.
+  get failedUiActions(): RealmCodeUiActionResult[] {
+    return (this.uiActions ?? []).filter(
+      (uiAction) => uiAction?.status === 'failed',
+    );
+  }
+
+  // The chat shows the card only for what the run wrote or what failed: saved
+  // or deleted files, room changes, created or deleted workspaces, a failed UI
+  // action, or a card it could not show. A run that only read, looked, or
+  // opened something has nothing for the chat to show. Its script result and
+  // captures go to the model only.
   get [hasNothingToShow](): boolean {
     return (
       !this.files?.length &&
-      !this.captures?.length &&
       !this.roomChanges?.length &&
-      !this.uiActions?.length &&
-      !this.shownCard &&
+      !this.createdWorkspaces?.length &&
+      !this.deletedWorkspaces?.length &&
+      !this.failedUiActions.length &&
       !this.showError
     );
   }
@@ -573,12 +582,30 @@ export class RunRealmCodeResult extends CardDef {
               </li>
             {{/each}}
           </ul>
-        {{else}}
-          <p class='no-files'>No files were changed.</p>
         {{/if}}
-        {{#if @model.uiActions.length}}
+        {{#if @model.createdWorkspaces.length}}
+          <ul class='workspaces'>
+            {{#each @model.createdWorkspaces as |url|}}
+              <li class='workspace' data-test-realm-code-created-workspace>
+                <span class='status'>Created</span>
+                <a href={{url}}>{{url}}</a>
+              </li>
+            {{/each}}
+          </ul>
+        {{/if}}
+        {{#if @model.deletedWorkspaces.length}}
+          <ul class='workspaces'>
+            {{#each @model.deletedWorkspaces as |url|}}
+              <li class='workspace' data-test-realm-code-deleted-workspace>
+                <span class='status'>Deleted</span>
+                <span>{{url}}</span>
+              </li>
+            {{/each}}
+          </ul>
+        {{/if}}
+        {{#if @model.failedUiActions.length}}
           <ul class='ui-actions'>
-            {{#each @model.uiActions as |uiAction|}}
+            {{#each @model.failedUiActions as |uiAction|}}
               <li
                 class='ui-action'
                 data-test-realm-code-ui-action={{uiAction.action}}
@@ -599,12 +626,6 @@ export class RunRealmCodeResult extends CardDef {
             {{/each}}
           </ul>
         {{/if}}
-        {{#if @model.shownCard}}
-          <p class='shown-card' data-test-realm-code-shown-card>
-            Opened
-            <a href={{@model.shownCard}}>{{@model.shownCard}}</a>
-          </p>
-        {{/if}}
         {{#if @model.showError}}
           <p class='show-error' data-test-realm-code-show-error>
             {{@model.showError}}
@@ -633,6 +654,7 @@ export class RunRealmCodeResult extends CardDef {
           font: var(--boxel-font-sm);
         }
         .files,
+        .workspaces,
         .room-changes,
         .ui-actions {
           margin: 0;
@@ -643,6 +665,7 @@ export class RunRealmCodeResult extends CardDef {
           gap: var(--boxel-sp-xxxs);
         }
         .file,
+        .workspace,
         .ui-action {
           display: flex;
           gap: var(--boxel-sp-xs);
@@ -653,16 +676,9 @@ export class RunRealmCodeResult extends CardDef {
           color: var(--boxel-450);
           text-transform: capitalize;
         }
-        .no-files {
-          margin: 0;
-          color: var(--boxel-450);
-        }
-        .shown-card,
         .show-error {
           margin: 0;
           word-break: break-all;
-        }
-        .show-error {
           color: var(--boxel-error-200);
         }
         .captures {

package/bundled-test-harness/assets/{add-workspace-JYBGLgLZ.js → add-workspace-1zRdl8zI.js}

@@ -15,7 +15,7 @@ import { pt as IconComponent } from "./icons-LMEaS73h.js";
 import { c as toWorkspaceEndpoint, d as getRandomBackgroundURL, f as iconURLFor } from "./utils-BoClFU2X.js";
 import { t as generateRandomWorkspaceName } from "./random-name-CAUVE_x-.js";
 import { t as modifier$1 } from "./on-key-BpOv7B2S.js";
-import { t as ModalContainer } from "./modal-container-YpGh-tkA.js";
+import { t as ModalContainer } from "./modal-container-CjnDLCtj.js";
 import { t as perform } from "./perform-g9ba6YNZ.js";
 import { t as _class } from "./to-elsewhere-MFFftJ0J.js";
 import { n as focus_when_selected_default, t as WorkspaceChooserItemContainer } from "./item-container-Bz_sEBsB.js";

package/bundled-test-harness/assets/{add-workspace-test-DRhnr1r8.js → add-workspace-test-D5iVse00.js}

@@ -7,7 +7,7 @@ import "./template-factory-ds9s0u8l.js";
 import { n as cleanseString } from "./utils-BoClFU2X.js";
 import { a as find, d as click, s as fillIn } from "./dist-BOAdzfkP.js";
 import { t as _class } from "./from-elsewhere-ChxbtsBa.js";
-import { t as AddWorkspace } from "./add-workspace-JYBGLgLZ.js";
+import { t as AddWorkspace } from "./add-workspace-1zRdl8zI.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { lt as setupRenderingTest } from "./mock-matrix-BekwDdCN.js";
 import { n as renderComponent } from "./render-component-B15Z0e2v.js";

package/bundled-test-harness/assets/{ai-module-creation-test-BJJhqeeA.js → ai-module-creation-test-GYiPd87c.js}

@@ -8,7 +8,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { d as click, i as findAll, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{app-BVQ3DVX4.js → app-CR7E2df0.js}

@@ -53,7 +53,7 @@ import { t as buildWaiter } from "./dist-CSQ-y1Ft.js";
 import { _ as auto_attached_card_exports, c as PillMenu, d as AiAssistantMessage, f as FocusPill, g as AiAssistantActionBar, m as AiAssistantAttachmentPicker, o as ai_assist_icon_2x_default, p as AiAssistantChatInput, s as AiAssistantSkillMenu, u as AiAssistantConversation } from "./panel-BGl2U6VJ.js";
 import { n as getCardCollection, t as card_collection_exports } from "./card-collection-CSTSGRCV.js";
 import { n as getCard, t as card_resource_exports } from "./card-resource-CqYNjo5b.js";
-import { _ as moduleContentsResource, a as SearchSheet, b as directory_exports, c as schema_editor_exports, d as idFromCardOrURL, f as id_from_card_or_url_exports, g as stack_backgrounds_exports, h as url_bar_exports, i as HostModeContent, l as run_while_active_exports, m as card_type_service_exports, n as RegisterUser, o as SearchSheetModes, p as search_sheet_state_exports, r as ForgotPassword, s as CardChooserModal, t as OperatorModeContainer, u as publish_progress_exports, v as module_contents_exports, x as card_type_exports, y as inheritance_chain_exports } from "./container-Cg9tfMT-.js";
+import { _ as moduleContentsResource, a as SearchSheet, b as directory_exports, c as schema_editor_exports, d as idFromCardOrURL, f as id_from_card_or_url_exports, g as stack_backgrounds_exports, h as url_bar_exports, i as HostModeContent, l as run_while_active_exports, m as card_type_service_exports, n as RegisterUser, o as SearchSheetModes, p as search_sheet_state_exports, r as ForgotPassword, s as CardChooserModal, t as OperatorModeContainer, u as publish_progress_exports, v as module_contents_exports, x as card_type_exports, y as inheritance_chain_exports } from "./container-aEzZntti.js";
 import { n as element_tracker_exports } from "./element-tracker-CT_tRvjz.js";
 import { n as file_tree_from_index_exports } from "./file-tree-from-index-BMpypZUK.js";
 import { a as normalized_dir_path_exports, c as isReady, o as maybe_exports, r as operator_mode_state_service_exports, s as file_exports } from "./operator-mode-state-service-Dr1_M_h2.js";
@@ -96,7 +96,7 @@ import { t as getUniqueValidToolDefinitions } from "./tool-definitions-Bhcf5vKh.
 import { a as createMonacoWaiterManager, i as AiAssistantApplyButton, o as monaco_test_waiter_exports } from "./aibot-message-BFUiu73w.js";
 import { r as shimBundledBase } from "./bundled-base-2icOkazR.js";
 import "./dist-BOAdzfkP.js";
-import { a as microwait, i as allSettled$1, n as task, o as rAF, r as afterRender, t as shimExternals } from "./externals-BnJo838b.js";
+import { a as microwait, i as allSettled$1, n as task, o as rAF, r as afterRender, t as shimExternals } from "./externals-wVTxNrdG.js";
 import { t as file_name_exports } from "./file-name-BBWa-sfG.js";
 import { n as write_text_file_exports } from "./write-text-file-6eoweSlJ.js";
 import { n as add_field_to_card_definition_exports } from "./add-field-to-card-definition-B37RDVLd.js";
@@ -111,7 +111,7 @@ import { n as create_listing_pr_request_exports } from "./create-listing-pr-requ
 import { n as can_read_realm_exports } from "./can-read-realm-D5lrmkjp.js";
 import { n as cancel_indexing_job_exports } from "./cancel-indexing-job-CNgRRh9C.js";
 import { n as capture_exports$2 } from "./capture-B8ulRJOm.js";
-import { a as update_code_path_with_selection_exports, c as read_binary_file_exports, d as generate_thumbnail_exports, f as generate_theme_example_exports, h as capture_card_exports, i as update_playground_selection_exports, l as listing_action_build_exports, m as create_submission_workflow_exports, o as serialize_card_exports, p as create_and_open_submission_workflow_card_exports, r as tools_exports, s as retry_submission_workflow_exports, u as get_card_type_schema_exports } from "./tools-D-uShEr3.js";
+import { a as update_code_path_with_selection_exports, c as read_binary_file_exports, d as generate_thumbnail_exports, f as generate_theme_example_exports, h as capture_card_exports, i as update_playground_selection_exports, l as listing_action_build_exports, m as create_submission_workflow_exports, o as serialize_card_exports, p as create_and_open_submission_workflow_card_exports, r as tools_exports, s as retry_submission_workflow_exports, u as get_card_type_schema_exports } from "./tools-BIhB57BB.js";
 import { n as check_correctness_exports, t as CheckCorrectnessTool } from "./check-correctness-ChVCz7lq.js";
 import { n as check_domain_availability_exports } from "./check-domain-availability-DQAz5ueY.js";
 import { n as copy_card_exports } from "./copy-card-CvcWI7Fp.js";
@@ -135,7 +135,7 @@ import { n as execute_atomic_operations_exports } from "./execute-atomic-operati
 import { n as fetch_card_json_exports } from "./fetch-card-json-C64OunoA.js";
 import { n as full_reindex_realm_exports } from "./full-reindex-realm-CxC7Vo2A.js";
 import { i as generate_example_cards_exports } from "./generate-example-cards-Qo9CMQ4b.js";
-import { n as run_realm_code_exports } from "./run-realm-code-BCbAj6ZU.js";
+import { n as run_realm_code_exports } from "./run-realm-code-WsTalbNy.js";
 import { n as get_all_realm_metas_exports } from "./get-all-realm-metas-s8xx-BM-.js";
 import { n as get_available_realm_identifiers_exports } from "./get-available-realm-identifiers-BXAkZByI.js";
 import { n as get_catalog_realm_identifiers_exports } from "./get-catalog-realm-identifiers-D-2RFr5h.js";

package/bundled-test-harness/assets/{binary-upload-dedupe-test-Bdmk8qpz.js → binary-upload-dedupe-test-mqTMTOGp.js}

@@ -6,7 +6,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { T as settled, d as click, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, I as setupOnSave, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix, xt as getTestRealmRegistry } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{can-invoke-test-C3_ldZpl.js → can-invoke-test-B3LhMm5-.js}

@@ -8,7 +8,7 @@ import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
 import { t as templateOnly } from "./template-only-6nVzLWF-.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { M as waitUntil, T as settled, h as render, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, P as setupIntegrationTestRealm, a as SYSTEM_CARD_FIXTURE_CONTENTS, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{card-chooser-paging-test-C7BNPfWp.js → card-chooser-paging-test-6LwuAKTj.js}

@@ -7,7 +7,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { M as waitUntil, T as settled, d as click, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{card-chooser-test-D8XNwCaW.js → card-chooser-test-CBvHX1BK.js}

@@ -7,7 +7,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { c as triggerKeyEvent, d as click, f as focus, o as waitFor, r as typeIn, s as fillIn, u as doubleClick } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{card-def-field-def-relationships-test-CuatVINU.js → card-def-field-def-relationships-test-DodLozx0.js}

@@ -7,7 +7,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import "./template-factory-ds9s0u8l.js";
 import { t as templateOnly } from "./template-only-6nVzLWF-.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { d as click, l as triggerEvent, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, nt as provide, ot as setupOperatorModeStateCleanup, t as setupMockMatrix, wt as percySnapshot } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{card-delete-test-DCmKEZ_Y.js → card-delete-test-BPde9vqy.js}

@@ -7,7 +7,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-Cg9tfMT-.js";
+import { t as OperatorModeContainer } from "./container-aEzZntti.js";
 import { M as waitUntil, d as click, l as triggerEvent, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { D as realmConfigCardJSON, F as setupLocalIndexing, H as testModuleRealm, I as setupOnSave, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";

package/bundled-test-harness/assets/{check-correctness-test-B1bGWVSm.js → check-correctness-test-Ct2aB6aD.js}

@@ -3,7 +3,7 @@ import { wr as testRealmURL } from "./runtime-common-DvMNml3g.js";
 import { M as waitUntil } from "./dist-BOAdzfkP.js";
 import { t as CheckCorrectnessTool } from "./check-correctness-ChVCz7lq.js";
 import { t as PatchCardInstanceTool } from "./patch-card-instance-ByN5rrU3.js";
-import { t as RunRealmCodeTool } from "./run-realm-code-BCbAj6ZU.js";
+import { t as RunRealmCodeTool } from "./run-realm-code-WsTalbNy.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { F as setupLocalIndexing, L as setupRealmCacheTeardown, P as setupIntegrationTestRealm, Z as withCachedRealmSetup, lt as setupRenderingTest, t as setupMockMatrix } from "./mock-matrix-BekwDdCN.js";
 import { r as getService } from "./dist-CPfIHBla.js";

package/bundled-test-harness/assets/{choreo-feature-reel-test-CGhD4996.js → choreo-feature-reel-test-Da7hUrQJ.js}

@@ -6,7 +6,7 @@ import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestR
 import { r as getService } from "./dist-CPfIHBla.js";
 import { o as setupChoreo } from "./test-support-dVdCmTGa.js";
 import { vt as setupBaseRealm } from "./base-realm-B17zVqh6.js";
-import { t as choreoGalleryContents } from "./choreo-gallery-BvL1V7P7.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-BKVGWFq7.js";
 import { t as renderCard } from "./render-component-B15Z0e2v.js";
 //#region tests/integration/choreo-feature-reel-test.gts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());

package/bundled-test-harness/assets/{choreo-gallery-BvL1V7P7.js → choreo-gallery-BKVGWFq7.js}

@@ -345,7 +345,7 @@ var boxel_glyph_default = "import Component from '@glimmer/component';\n\n/** SV
 var choreo_mark_default = "/**\n * The mark: a comet lettering a C.\n *\n * A choreography is not a picture of movement — it is the same element,\n * measured before and after, and the line the engine draws between those\n * measurements. So the mark is that line, arriving, twice over: an outer\n * arc that fades in from the past, sweeps 284°, and terminates inside the\n * filled bead that is the element NOW — and a second, inner orbit on its\n * own timeline, arriving at its own dot. One arc is motion; two in phase\n * are a choreography. The gap they leave open letters Choreo's C.\n *\n * The geometry is exported because the mark exists twice: static in the\n * top bar, and taken apart in the Build Order demo, where its own assembly\n * is the demonstration. One set of numbers, so the logo being animated is\n * provably the logo being worn.\n */\n\n/** the fading half of the outer sweep: bottom tip round the left, into the past */\nexport const TAIL = 'M18.3 16.9A8 8 0 0 1 4 12';\n\n/** the arriving half: over the top, ending where the bead sits */\nexport const HEAD = 'M4 12A8 8 0 0 1 18.3 7.1';\n\n/** the outer element now — the arc terminates inside it */\nexport const BEAD = { cx: 18.3, cy: 7.1, r: 2.8 } as const;\n\n/**\n * The second timeline: 210° from the lower left over the top, arriving at\n * its own dot. It starts 5° further round than the geometry alone wants, so\n * its lighter stroke reads as ending level with the heavier outer sweep.\n */\nexport const ORBIT = 'M13.66 16.07A4.4 4.4 0 0 1 8.4 9.5';\n\n/**\n * The inner element now — the last 85° of the sweep in the hot color. It\n * trails the outer bead by 22°, which keeps the two clear of each other and\n * makes the mark read as a chase rather than a diagram.\n */\nexport const TIP = 'M8.4 9.5A4.4 4.4 0 0 1 14.2 8.2';\n\nexport const ChoreoMark = <template>\n  {{! Static on purpose — the mark performs in the Build Order demo; up here\n    it has already arrived. }}\n  <svg class='choreo-mark' viewBox='0 0 24 24' aria-hidden='true'>\n    <path\n      d={{TAIL}}\n      fill='none'\n      stroke='var(--mark-tail)'\n      stroke-width='2.2'\n      stroke-linecap='round'\n    />\n    <path\n      d={{HEAD}}\n      fill='none'\n      stroke='var(--ember-hot)'\n      stroke-width='2.2'\n      stroke-linecap='round'\n    />\n    <circle cx={{BEAD.cx}} cy={{BEAD.cy}} r={{BEAD.r}} fill='var(--ember)' />\n    <path\n      d={{ORBIT}}\n      fill='none'\n      stroke='var(--mark-orbit)'\n      stroke-width='1.6'\n      stroke-linecap='round'\n    />\n    <path\n      d={{TIP}}\n      fill='none'\n      stroke='var(--ember-hot)'\n      stroke-width='1.6'\n      stroke-linecap='round'\n    />\n  </svg>\n  <style scoped>\n    .choreo-mark {\n      width: 34px;\n      height: 34px;\n      display: block;\n    }\n  </style>\n</template>;\n\nexport default ChoreoMark;\n";
 //#endregion
 //#region ../choreo-gallery/realm/shell/choreo-root.gts?raw
-var choreo_root_default = "import type { TOC } from '@ember/component/template-only';\nimport { MotionConfig } from 'glimmer-motion';\n\nimport { theme } from '../lib/theme';\n\ninterface Signature {\n  Blocks: { default: [] };\n  Element: HTMLDivElement;\n}\n\n/**\n * The boundary every piece of the gallery renders inside: the palette, the\n * type, and the few element defaults the demos were designed against.\n *\n * The tokens are custom properties declared on this element, so everything\n * inside it — the shell's own components and every demo stage — inherits them\n * without the gallery ever styling the host's document. The theme switch is\n * this element's `data-theme`.\n */\nexport const ChoreoRoot: TOC<Signature> = <template>\n  <div\n    class='choreo-site'\n    data-choreo-site\n    data-test-choreo-site\n    data-theme={{theme.resolved}}\n    ...attributes\n  >\n    <MotionConfig @reducedMotion='user'>\n      {{yield}}\n    </MotionConfig>\n  </div>\n  <style scoped>\n    .choreo-site {\n      color-scheme: dark;\n      /* Dark surfaces are a warm charcoal ladder, not near-black.\n         well < bg < page < elev < spot, so recessed chrome still sinks and\n         cards still lift, without a black floor. */\n      --bg-well: #221e1a;\n      --bg: #2a2521;\n      --bg-elev: #3a342e;\n      --bg-spot: #443c35;\n      /* Playhead's own surfaces, a shade above the shared ladder so its\n         small UI sits ON the page rather than cutting a hole in it. */\n      --ph-card-top: #3d362f;\n      --ph-card-bot: #322c27;\n      --ph-go-top: #4a4139;\n      --ph-go-bot: #2c2722;\n      --ph-receipt-top: #403830;\n      --ph-receipt-bot: #2e2924;\n      --ph-row: rgba(0, 0, 0, 0.16);\n      --ph-groove: rgba(0, 0, 0, 0.22);\n      --ph-btn: rgba(0, 0, 0, 0.26);\n      /* the page's own resting tone. --bg is the recessed canvas; cards use\n         --bg-elev, a notch above this, so they lift instead of sinking. */\n      --bg-page: #2e2924;\n      --ink: #f3ece3;\n      /* a step between --ink and --ink-dim, for the notes' headings */\n      --ink-soft: #e6dfd6;\n      --ink-dim: #d2c9bf;\n      --ink-faint: #b8aea3;\n      --line: rgba(var(--ink-rgb), 0.09);\n      --line-strong: rgba(var(--ink-rgb), 0.16);\n      /* bare triplets for rgba(var(--x-rgb), a) call sites that want an\n         alpha no token covers; redefined per theme so they repaint */\n      --bg-rgb: 42, 37, 33;\n      --ink-rgb: 243, 236, 227;\n      /* Shadows were picked against a dark page. Light mode scales the\n         alpha and warms the tint; in dark the multiplier is 1. */\n      --shadow-rgb: 0, 0, 0;\n      --shadow-a: 1;\n      /* a raised panel goes lighter than the page in dark mode and darker\n         in light mode; this is that one bit, so panels flip together */\n      --surface-tint-rgb: 255, 255, 255;\n      --ember: #ff3b1f;\n      --ember-hot: #ff6a3a;\n      --copper: #e4a35a;\n      --iris: #9667f7;\n      --steel: #8b969c;\n      --teal: #4fb8a6;\n      --azure: #6ea8f0;\n      /* An accent as TEXT. The accents above are tuned as fills and rules;\n         small type in them needs 4.5:1 on --bg, --bg-page, --bg-elev and the\n         faint tints laid over them (a code box, a tile's meta, an API pill), so\n         each one an element sets text in has an -ink twin, lifted here and\n         darkened in light mode. Text reads the -ink token; fills,\n         rules and glows keep the accent. */\n      --ember-ink: #ff7a4e;\n      --copper-ink: var(--copper);\n      --iris-ink: #af8bf9;\n      --steel-ink: #96a0a5;\n      /* the small uppercase label over a section, a tile or a code sample */\n      --eyebrow: var(--ember-ink);\n      /* ember text on an ember-tinted fill, such as a diagram's hot box */\n      --hot-ink: #ff9370;\n      /* the theme's focus color, which Boxel's own components read too; a\n         focus indicator needs 3:1 against whatever it is drawn over */\n      --ring: var(--ember-hot);\n      --glow: rgba(255, 59, 31, 0.38);\n      /* the mark's fading tail and its inner orbit. The -dark pair holds in\n         either theme, for a mark that sits on a dark ground. */\n      --mark-tail-dark: rgba(255, 59, 31, 0.35);\n      --mark-orbit-dark: rgba(139, 150, 156, 0.75);\n      --mark-tail: var(--mark-tail-dark);\n      --mark-orbit: var(--mark-orbit-dark);\n      --syn-string: #ffb36a;\n      --gradient-tail: var(--ink);\n      --font-display: 'Syne', 'Avenir Next', sans-serif;\n      --font-display-alt: 'Archivo', 'Avenir Next Condensed', sans-serif;\n      --font: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;\n      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;\n      --ease: cubic-bezier(0.22, 1, 0.36, 1);\n      --page: 1180px;\n      /* one flat color plus two soft radial glows — no texture, so the\n         ground is as composable as any other layer */\n      --wash:\n        radial-gradient(\n          1200px 640px at 12% -10%,\n          rgba(255, 59, 31, 0.16),\n          transparent 55%\n        ),\n        radial-gradient(\n          900px 480px at 110% 8%,\n          rgba(228, 163, 90, 0.08),\n          transparent 50%\n        ),\n        var(--bg-page);\n\n      position: relative;\n      min-height: 100%;\n      color: var(--ink);\n      font-family: var(--font);\n      font-size: 16px;\n      line-height: 1.5;\n      background: var(--wash);\n      transition:\n        background 220ms var(--ease),\n        color 220ms var(--ease);\n    }\n\n    /* Light mode. The accents carry over unchanged as fills and rules; every\n       ink that sets text gets a darker value that holds 4.5:1 on cream. */\n    .choreo-site[data-theme='light'] {\n      color-scheme: light;\n      --bg-well: #e2dccf;\n      --bg: #efe9df;\n      --bg-elev: #f7f3ec;\n      --bg-spot: #fbf8f3;\n      --shadow-rgb: 72, 56, 44;\n      --shadow-a: 0.3;\n      --ph-card-top: var(--bg-spot);\n      --ph-card-bot: var(--bg-well);\n      --ph-go-top: var(--bg-spot);\n      --ph-go-bot: var(--bg-well);\n      --ph-receipt-top: var(--bg-spot);\n      --ph-receipt-bot: var(--bg-well);\n      --ph-row: var(--bg-well);\n      --ph-groove: var(--bg-well);\n      --ph-btn: var(--bg-well);\n      --bg-page: #f2ece1;\n      --ink: #211d18;\n      --ink-soft: #47423a;\n      --ink-dim: #5e564b;\n      --ink-faint: #6d6458;\n      --line: rgba(33, 29, 24, 0.1);\n      --line-strong: rgba(33, 29, 24, 0.18);\n      --bg-rgb: 239, 233, 223;\n      --ink-rgb: 33, 29, 24;\n      --surface-tint-rgb: 33, 29, 24;\n      --ember-ink: #bf2e00;\n      --copper-ink: #905824;\n      --iris-ink: #7334f5;\n      --steel-ink: #5e686e;\n      --hot-ink: #a02600;\n      --ring: var(--ember-ink);\n      --mark-tail: rgba(255, 59, 31, 0.5);\n      --mark-orbit: rgba(94, 104, 110, 0.85);\n      --syn-string: #a24f00;\n      --gradient-tail: var(--copper);\n      --lightbox-ring: rgba(33, 29, 24, 0.12);\n    }\n\n    /* The element defaults the demos were designed against. :where() gives\n       them no more weight than a bare element selector, so any class rule a\n       component sets on its own elements outranks them. */\n    .choreo-site,\n    :where(.choreo-site) :deep(:where(*)),\n    :where(.choreo-site) :deep(:where(*)::before),\n    :where(.choreo-site) :deep(:where(*)::after) {\n      box-sizing: border-box;\n    }\n\n    :where(.choreo-site) :deep(:where(a)) {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    :where(.choreo-site) :deep(:where(button, input)) {\n      font: inherit;\n      color: inherit;\n    }\n\n    :where(.choreo-site) :deep(:where(button)) {\n      cursor: pointer;\n    }\n\n    /* No double-tap-to-zoom on anything you are meant to tap: Safari's\n       wait for a second tap reads as lag on demos you tap repeatedly. */\n    :where(.choreo-site)\n      :deep(:where(button, a, select, summary, [role='button'])) {\n      touch-action: manipulation;\n    }\n\n    :where(.choreo-site) :deep(:where(:focus-visible)) {\n      outline: 2px solid var(--ring);\n      outline-offset: 3px;\n    }\n\n    /* The operator-mode container recolors every focused button with an\n       unlayered button:focus:not(:disabled) rule, at (0,2,1). This rule\n       paints the gallery's ring one notch above that, at (0,2,2) with the\n       scope attribute, so a class rule a component sets on its own buttons,\n       at (0,3,0) or more, still wins. :not(svg) is only that notch. */\n    :where(.choreo-site) :deep(button:focus-visible:not(svg)) {\n      outline-color: var(--ring);\n    }\n\n    /* Text for a screen reader alone: a live region's announcement, a\n       control's full name, \"(opens in a new tab)\". Any component in the\n       gallery can use the class. */\n    .choreo-site :deep(.sr-only) {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      padding: 0;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* glimmer-motion marks the document while a drag is held, so nothing in\n       the gallery selects under the pointer mid-drag */\n    html[data-gm-dragging] .choreo-site,\n    html[data-gm-dragging] .choreo-site :deep(*) {\n      -webkit-user-select: none !important;\n      user-select: none !important;\n      -webkit-touch-callout: none !important;\n    }\n\n    /* The syntax spans come from highlightSample as trusted HTML, so they\n       carry no component's scope; every code box in the gallery shares\n       these colors. */\n    .choreo-site :deep(.syn-tag),\n    .choreo-site :deep(.syn-arg),\n    .choreo-site :deep(.syn-keyword) {\n      color: var(--iris-ink);\n    }\n\n    .choreo-site :deep(.syn-attr) {\n      color: color-mix(in srgb, var(--ink) 80%, var(--bg-page));\n    }\n\n    .choreo-site :deep(.syn-string) {\n      color: var(--syn-string);\n    }\n\n    .choreo-site :deep(.syn-helper),\n    .choreo-site :deep(.syn-mustache) {\n      color: var(--ember-ink);\n    }\n\n    .choreo-site :deep(.syn-number) {\n      color: var(--steel-ink);\n    }\n\n    .choreo-site :deep(.syn-comment) {\n      color: var(--ink-faint);\n    }\n\n    .choreo-site :deep(.syn-punct) {\n      color: var(--ink-dim);\n    }\n  </style>\n</template>;\n";
+var choreo_root_default = "import type { TOC } from '@ember/component/template-only';\nimport { MotionConfig } from 'glimmer-motion';\n\nimport { theme } from '../lib/theme';\n\ninterface Signature {\n  Blocks: { default: [] };\n  Element: HTMLDivElement;\n}\n\n/**\n * The boundary every piece of the gallery renders inside: the palette, the\n * type, and the few element defaults the demos were designed against.\n *\n * The tokens are custom properties declared on this element, so everything\n * inside it — the shell's own components and every demo stage — inherits them\n * without the gallery ever styling the host's document. The theme switch is\n * this element's `data-theme`.\n */\nexport const ChoreoRoot: TOC<Signature> = <template>\n  <div\n    class='choreo-site'\n    data-choreo-site\n    data-test-choreo-site\n    data-theme={{theme.resolved}}\n    ...attributes\n  >\n    <MotionConfig @reducedMotion='user'>\n      {{yield}}\n    </MotionConfig>\n  </div>\n  <style scoped>\n    .choreo-site {\n      color-scheme: dark;\n      /* Dark surfaces are a warm charcoal ladder, not near-black.\n         well < bg < page < elev < spot, so recessed chrome still sinks and\n         cards still lift, without a black floor. */\n      --bg-well: #221e1a;\n      --bg: #2a2521;\n      --bg-elev: #3a342e;\n      --bg-spot: #443c35;\n      /* Playhead's own surfaces, a shade above the shared ladder so its\n         small UI sits ON the page rather than cutting a hole in it. */\n      --ph-card-top: #3d362f;\n      --ph-card-bot: #322c27;\n      --ph-go-top: #4a4139;\n      --ph-go-bot: #2c2722;\n      --ph-receipt-top: #403830;\n      --ph-receipt-bot: #2e2924;\n      --ph-row: rgba(0, 0, 0, 0.16);\n      --ph-groove: rgba(0, 0, 0, 0.22);\n      --ph-btn: rgba(0, 0, 0, 0.26);\n      /* the page's own resting tone. --bg is the recessed canvas; cards use\n         --bg-elev, a notch above this, so they lift instead of sinking. */\n      --bg-page: #2e2924;\n      --ink: #f3ece3;\n      /* a step between --ink and --ink-dim, for the notes' headings */\n      --ink-soft: #e6dfd6;\n      --ink-dim: #d2c9bf;\n      --ink-faint: #b8aea3;\n      --line: rgba(var(--ink-rgb), 0.09);\n      --line-strong: rgba(var(--ink-rgb), 0.16);\n      /* bare triplets for rgba(var(--x-rgb), a) call sites that want an\n         alpha no token covers; redefined per theme so they repaint */\n      --bg-rgb: 42, 37, 33;\n      --ink-rgb: 243, 236, 227;\n      /* Shadows were picked against a dark page. Light mode scales the\n         alpha and warms the tint; in dark the multiplier is 1. */\n      --shadow-rgb: 0, 0, 0;\n      --shadow-a: 1;\n      /* a raised panel goes lighter than the page in dark mode and darker\n         in light mode; this is that one bit, so panels flip together */\n      --surface-tint-rgb: 255, 255, 255;\n      --ember: #ff3b1f;\n      --ember-hot: #ff6a3a;\n      --copper: #e4a35a;\n      --iris: #9667f7;\n      --steel: #8b969c;\n      --teal: #4fb8a6;\n      --azure: #6ea8f0;\n      /* An accent as TEXT. The accents above are tuned as fills and rules;\n         small type in them needs 4.5:1 on --bg, --bg-page, --bg-elev and the\n         faint tints laid over them (a code box, a tile's meta, an API pill), so\n         each one an element sets text in has an -ink twin, lifted here and\n         darkened in light mode. Text reads the -ink token; fills,\n         rules and glows keep the accent. */\n      --ember-ink: #ff7a4e;\n      --copper-ink: var(--copper);\n      --iris-ink: #af8bf9;\n      --steel-ink: #96a0a5;\n      /* the small uppercase label over a section, a tile or a code sample */\n      --eyebrow: var(--ember-ink);\n      /* ember text on an ember-tinted fill, such as a diagram's hot box */\n      --hot-ink: #ff9370;\n      /* the theme's focus color, which Boxel's own components read too; a\n         focus indicator needs 3:1 against whatever it is drawn over */\n      --ring: var(--ember-hot);\n      --glow: rgba(255, 59, 31, 0.38);\n      /* the mark's fading tail and its inner orbit. The -dark pair holds in\n         either theme, for a mark that sits on a dark ground. */\n      --mark-tail-dark: rgba(255, 59, 31, 0.35);\n      --mark-orbit-dark: rgba(139, 150, 156, 0.75);\n      --mark-tail: var(--mark-tail-dark);\n      --mark-orbit: var(--mark-orbit-dark);\n      --syn-string: #ffb36a;\n      --gradient-tail: var(--ink);\n      --font-display: 'Syne', 'Avenir Next', sans-serif;\n      --font-display-alt: 'Archivo', 'Avenir Next Condensed', sans-serif;\n      --font: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;\n      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;\n      --ease: cubic-bezier(0.22, 1, 0.36, 1);\n      --page: 1180px;\n      /* one flat color plus two soft radial glows — no texture, so the\n         ground is as composable as any other layer */\n      --wash:\n        radial-gradient(\n          1200px 640px at 12% -10%,\n          rgba(255, 59, 31, 0.16),\n          transparent 55%\n        ),\n        radial-gradient(\n          900px 480px at 110% 8%,\n          rgba(228, 163, 90, 0.08),\n          transparent 50%\n        ),\n        var(--bg-page);\n\n      position: relative;\n      min-height: 100%;\n      color: var(--ink);\n      font-family: var(--font);\n      font-size: 16px;\n      line-height: 1.5;\n      background: var(--wash);\n      transition:\n        background 220ms var(--ease),\n        color 220ms var(--ease);\n    }\n\n    /* Light mode. The accents carry over unchanged as fills and rules; every\n       ink that sets text gets a darker value that holds 4.5:1 on cream. The\n       one exception is the hero's gradient word in gallery-grid.gts, which\n       keeps the bright accents on purpose (see the comment there). */\n    .choreo-site[data-theme='light'] {\n      color-scheme: light;\n      --bg-well: #e2dccf;\n      --bg: #efe9df;\n      --bg-elev: #f7f3ec;\n      --bg-spot: #fbf8f3;\n      --shadow-rgb: 72, 56, 44;\n      --shadow-a: 0.3;\n      --ph-card-top: var(--bg-spot);\n      --ph-card-bot: var(--bg-well);\n      --ph-go-top: var(--bg-spot);\n      --ph-go-bot: var(--bg-well);\n      --ph-receipt-top: var(--bg-spot);\n      --ph-receipt-bot: var(--bg-well);\n      --ph-row: var(--bg-well);\n      --ph-groove: var(--bg-well);\n      --ph-btn: var(--bg-well);\n      --bg-page: #f2ece1;\n      --ink: #211d18;\n      --ink-soft: #47423a;\n      --ink-dim: #5e564b;\n      --ink-faint: #6d6458;\n      --line: rgba(33, 29, 24, 0.1);\n      --line-strong: rgba(33, 29, 24, 0.18);\n      --bg-rgb: 239, 233, 223;\n      --ink-rgb: 33, 29, 24;\n      --surface-tint-rgb: 33, 29, 24;\n      --ember-ink: #bf2e00;\n      --copper-ink: #905824;\n      --iris-ink: #7334f5;\n      --steel-ink: #5e686e;\n      --hot-ink: #a02600;\n      --ring: var(--ember-ink);\n      --mark-tail: rgba(255, 59, 31, 0.5);\n      --mark-orbit: rgba(94, 104, 110, 0.85);\n      --syn-string: #a24f00;\n      --gradient-tail: var(--copper);\n      --lightbox-ring: rgba(33, 29, 24, 0.12);\n    }\n\n    /* The element defaults the demos were designed against. :where() gives\n       them no more weight than a bare element selector, so any class rule a\n       component sets on its own elements outranks them. */\n    .choreo-site,\n    :where(.choreo-site) :deep(:where(*)),\n    :where(.choreo-site) :deep(:where(*)::before),\n    :where(.choreo-site) :deep(:where(*)::after) {\n      box-sizing: border-box;\n    }\n\n    :where(.choreo-site) :deep(:where(a)) {\n      color: inherit;\n      text-decoration: none;\n    }\n\n    :where(.choreo-site) :deep(:where(button, input)) {\n      font: inherit;\n      color: inherit;\n    }\n\n    :where(.choreo-site) :deep(:where(button)) {\n      cursor: pointer;\n    }\n\n    /* No double-tap-to-zoom on anything you are meant to tap: Safari's\n       wait for a second tap reads as lag on demos you tap repeatedly. */\n    :where(.choreo-site)\n      :deep(:where(button, a, select, summary, [role='button'])) {\n      touch-action: manipulation;\n    }\n\n    :where(.choreo-site) :deep(:where(:focus-visible)) {\n      outline: 2px solid var(--ring);\n      outline-offset: 3px;\n    }\n\n    /* The operator-mode container recolors every focused button with an\n       unlayered button:focus:not(:disabled) rule, at (0,2,1). This rule\n       paints the gallery's ring one notch above that, at (0,2,2) with the\n       scope attribute, so a class rule a component sets on its own buttons,\n       at (0,3,0) or more, still wins. :not(svg) is only that notch. */\n    :where(.choreo-site) :deep(button:focus-visible:not(svg)) {\n      outline-color: var(--ring);\n    }\n\n    /* Text for a screen reader alone: a live region's announcement, a\n       control's full name, \"(opens in a new tab)\". Any component in the\n       gallery can use the class. */\n    .choreo-site :deep(.sr-only) {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      padding: 0;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* glimmer-motion marks the document while a drag is held, so nothing in\n       the gallery selects under the pointer mid-drag */\n    html[data-gm-dragging] .choreo-site,\n    html[data-gm-dragging] .choreo-site :deep(*) {\n      -webkit-user-select: none !important;\n      user-select: none !important;\n      -webkit-touch-callout: none !important;\n    }\n\n    /* The syntax spans come from highlightSample as trusted HTML, so they\n       carry no component's scope; every code box in the gallery shares\n       these colors. */\n    .choreo-site :deep(.syn-tag),\n    .choreo-site :deep(.syn-arg),\n    .choreo-site :deep(.syn-keyword) {\n      color: var(--iris-ink);\n    }\n\n    .choreo-site :deep(.syn-attr) {\n      color: color-mix(in srgb, var(--ink) 80%, var(--bg-page));\n    }\n\n    .choreo-site :deep(.syn-string) {\n      color: var(--syn-string);\n    }\n\n    .choreo-site :deep(.syn-helper),\n    .choreo-site :deep(.syn-mustache) {\n      color: var(--ember-ink);\n    }\n\n    .choreo-site :deep(.syn-number) {\n      color: var(--steel-ink);\n    }\n\n    .choreo-site :deep(.syn-comment) {\n      color: var(--ink-faint);\n    }\n\n    .choreo-site :deep(.syn-punct) {\n      color: var(--ink-dim);\n    }\n  </style>\n</template>;\n";
 //#endregion
 //#region ../choreo-gallery/realm/shell/code-box.gts?raw
 var code_box_default = "import type { TOC } from '@ember/component/template-only';\n\nimport { highlightSample } from '../lib/highlight';\n\ninterface Signature {\n  Args: {\n    /** what the snippet is FROM — a filename, or the language for a sketch */\n    label?: string;\n    source: string | null | undefined;\n  };\n  Element: HTMLElement;\n}\n\n/**\n * The gallery's code box: a label over a highlighted, copyable snippet.\n *\n * One component, so the usage example under every stage, a walkthrough step\n * and a snippet quoted in a demo's notes are visibly the same object rather\n * than three kinds of code block.\n */\nexport const CodeBox: TOC<Signature> = <template>\n  <section class='sample' aria-label='Code' ...attributes>\n    <p class='sample-label'>{{if @label @label 'Glimmer'}}</p>\n    <pre><code>{{highlightSample @source}}</code></pre>\n  </section>\n  <style scoped>\n    .sample {\n      margin-top: 22px;\n      border: 1px solid var(--line);\n      border-radius: 18px;\n      overflow: hidden;\n      /* the same faint light veil as a demo's own stage */\n      background: rgba(var(--surface-tint-rgb), 0.03);\n    }\n\n    .sample-label {\n      margin: 0;\n      padding: 10px 16px 0;\n      font-family: var(--font-mono);\n      font-size: 10px;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      color: var(--eyebrow);\n    }\n\n    pre {\n      margin: 0;\n      padding: 12px 16px 16px;\n      overflow-x: auto;\n    }\n\n    code {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      line-height: 1.55;\n      color: var(--ink);\n      white-space: pre;\n      -webkit-user-select: text;\n      user-select: text;\n    }\n\n    @media (max-width: 720px) {\n      code {\n        font-size: 11px;\n      }\n    }\n  </style>\n</template>;\n\nexport default CodeBox;\n";
@@ -372,7 +372,7 @@ var film_stage_default = "import { on } from '@ember/modifier';\nimport { htmlSa
 var film_tile_default = "import type { TOC } from '@ember/component/template-only';\nimport { concat } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { htmlSafe } from '@ember/template';\n\n/**\n * THE POSTER TILE — the face a film wears in the gallery.\n *\n * A gallery tile cannot run a film. The grid mounts forty-odd demos at\n * once and the films are the most expensive things in the building, so\n * no tile runs WebGL. What goes there instead is what a cinema puts\n * outside itself — a poster: the picture's own sky, its silhouette, the\n * title package it wears on its own gate, and one door.\n *\n * The picture is a STILL OF THE FILM ITSELF — one frame read back off\n * the picture's own canvas through the port's `snapshot()`, the same\n * call every still join makes, captured headless at a named shot and\n * committed as a webp. Nothing is drawn twice: the poster is the film,\n * graded as the film grades it. Sylva's works the same way.\n *\n * The lower third is the film's OWN gate copy — kicker, wordmark, line —\n * so the card and the door it opens say the same thing in the same\n * order. Colours arrive as custom properties from the caller; the shape\n * is shared, the palette is the film's.\n */\nexport const FilmTile: TOC<{\n  Args: {\n    /** the film's gate kicker, e.g. 'A construction study' */\n    eyebrow: string;\n    /** where the subject sits in the still, as `object-position` — the\n     *  card is never 16:9, so the crop has to be told what to keep */\n    focus?: string;\n    /** what the ring does, for a screen reader */\n    label: string;\n    /** the gate's one line under the wordmark */\n    line: string;\n    /** the wordmark */\n    name: string;\n    /** open the film in theater; without it the ring is drawn but inert */\n    open?: () => void;\n    /** `--ft-*` custom properties: floor, ink, key, sky, sub */\n    palette: string;\n    /** a frame of the film, read back through the picture's snapshot() */\n    poster: string;\n  };\n}> = <template>\n  <div class='ft-tile' style={{htmlSafe @palette}}>\n    <img\n      class='ft-art'\n      src={{@poster}}\n      alt=''\n      style={{if @focus (htmlSafe (concat 'object-position:' @focus))}}\n    />\n    <div class='ft-scrim' aria-hidden='true'></div>\n    {{! the door: a disc with a hairline ring, and nothing to read }}\n    {{#if @open}}\n      <button\n        type='button'\n        class='ft-play'\n        aria-label={{@label}}\n        {{on 'click' @open}}\n      ></button>\n    {{else}}\n      <span class='ft-play' aria-hidden='true'></span>\n    {{/if}}\n    <div class='ft-third' aria-hidden='true'>\n      <p class='ft-eyebrow'>{{@eyebrow}}</p>\n      <p class='ft-name'>{{@name}}</p>\n      <p class='ft-line'>{{@line}}</p>\n    </div>\n  </div>\n\n  <style scoped>\n    .ft-tile {\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n      background: var(--ft-sky, #101014);\n    }\n\n    /* the still is 16:9 and the card is not: CROP, never letterbox —\n       a band of empty sky above a poster reads as a mistake. The frame\n       is held slightly above centre, where these two films put their\n       subject. */\n    .ft-art {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      object-position: 50% 42%;\n    }\n\n    /* the title package needs a floor to stand on, and the ring needs\n       the middle held back a little */\n    .ft-scrim {\n      position: absolute;\n      inset: 0;\n      background:\n        radial-gradient(\n          58% 48% at 50% 42%,\n          rgba(0, 0, 0, 0) 40%,\n          var(--ft-veil, rgba(0, 0, 0, 0.26)) 100%\n        ),\n        linear-gradient(\n          rgba(0, 0, 0, 0) 46%,\n          var(--ft-floor, rgba(0, 0, 0, 0.82)) 100%\n        );\n    }\n\n    .ft-play {\n      position: absolute;\n      left: 50%;\n      top: 42%;\n      width: 88px;\n      height: 88px;\n      padding: 0;\n      transform: translate(-50%, -50%);\n      border-radius: 50%;\n      border: 1px solid var(--ft-rim, rgba(255, 255, 255, 0.6));\n      background: var(--ft-disc, rgba(18, 16, 12, 0.42));\n      backdrop-filter: blur(6px);\n      -webkit-backdrop-filter: blur(6px);\n      cursor: pointer;\n      transition: transform 200ms ease;\n    }\n\n    /* the quiet outer ring — the film's own key colour, half lit */\n    .ft-play::before {\n      content: '';\n      position: absolute;\n      inset: -28px;\n      border-radius: 50%;\n      border: 1px solid var(--ft-ring, rgba(255, 255, 255, 0.24));\n    }\n\n    /* the play mark, nudged off centre the way a play triangle must be\n       to LOOK centred inside a circle */\n    .ft-play::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-42%, -50%);\n      border-style: solid;\n      border-width: 10px 0 10px 17px;\n      border-color: transparent transparent transparent var(--ft-mark, #ffffff);\n    }\n\n    .ft-play:hover {\n      transform: translate(-50%, -50%) scale(1.06);\n    }\n\n    .ft-third {\n      position: absolute;\n      right: 18px;\n      bottom: 14px;\n      left: 18px;\n    }\n\n    .ft-eyebrow {\n      margin: 0 0 5px;\n      font:\n        500 9px/1 ui-monospace,\n        monospace;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      color: var(--ft-key, #d8a24a);\n    }\n\n    .ft-name {\n      margin: 0 0 3px;\n      font:\n        300 26px/1 ui-sans-serif,\n        system-ui,\n        sans-serif;\n      letter-spacing: 0.3em;\n      text-transform: uppercase;\n      color: var(--ft-ink, rgba(255, 255, 255, 0.96));\n    }\n\n    .ft-line {\n      margin: 0;\n      font:\n        300 13px/1.3 ui-serif,\n        Georgia,\n        serif;\n      color: var(--ft-sub, rgba(255, 255, 255, 0.7));\n    }\n\n    /* a small card is a stamp: the ring would cover the poster and the\n       wordmark would wrap, so both stand down */\n    @container (max-width: 300px) {\n      .ft-play {\n        width: 62px;\n        height: 62px;\n      }\n      .ft-name {\n        font-size: 20px;\n        letter-spacing: 0.24em;\n      }\n    }\n  </style>\n</template>;\n";
 //#endregion
 //#region ../choreo-gallery/realm/shell/gallery-grid.gts?raw
-var gallery_grid_default = "import type { BoxComponent } from '@cardstack/base/card-api';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { LayoutGroup, motion, Presence } from 'glimmer-motion';\n\nimport { type GalleryDemo, GROUPS } from '../demo';\nimport { highlightSample } from '../lib/highlight';\n\nconst ALL = 'All';\nconst DEEP_DIVE = 'Deep Dive';\n\nconst NO_PANEL: { id: string }[] = [];\n\n/** somebody who has asked not to be moved is not asked twice */\nconst reducedMotion = () =>\n  typeof matchMedia === 'function' &&\n  matchMedia('(prefers-reduced-motion: reduce)').matches;\nconst tileKey = (tile: GalleryTile) => tile.demo.slug;\nconst hasNotes = (demo: GalleryDemo) =>\n  Boolean((demo.constructor as typeof GalleryDemo).notes);\n\n/**\n * One tile of the grid: the demo, and the gallery's field component for it,\n * which renders the demo card in a format of its own. The host owns that\n * component, so a click on the tile opens the demo card through the host.\n */\nexport interface GalleryTile {\n  Card: BoxComponent;\n  demo: GalleryDemo;\n}\n\n/** a tile that was not in the old list arrives; one that survives just moves */\nconst cardIn = { opacity: 0, scale: 0.96 };\nconst cardHere = { opacity: 1, scale: 1 };\nconst cardOut = { opacity: 0, scale: 0.96 };\nconst cardSpring = {\n  bounce: 0.12,\n  type: 'spring',\n  visualDuration: 0.42,\n} as const;\n\n/**\n * The same three poses with the scale taken out, and a tween instead of a\n * spring — what a filter looks like once the grid has stopped moving tiles.\n * A pure opacity change composites, needs no layout read, and does not care\n * how many demos are running underneath it.\n */\nconst flatIn = { opacity: 0 };\nconst flatHere = { opacity: 1 };\nconst flatOut = { opacity: 0 };\nconst flatFade = { duration: 0.18, ease: 'easeOut' } as const;\nconst panelKey = (item: { id: string }) => item.id;\nconst panelIn = { opacity: 0, y: -10 };\nconst panelHere = { opacity: 1, y: 0 };\nconst panelOut = { opacity: 0, y: -6 };\nconst panelSpring = {\n  bounce: 0.14,\n  type: 'spring',\n  visualDuration: 0.34,\n} as const;\n\nconst SAMPLE = `{{! Filtering this list is a layout animation, not a page transition.\n\n    A View Transition would be the obvious reach — and the wrong one here.\n    It works by snapshotting the page into bitmaps and crossfading them, and\n    every tile in this grid is a live demo: running animations would freeze\n    into images for the length of the switch.\n\n    layout=true moves the real elements. The demos keep running while their\n    tiles fly to new seats. }}\n<LayoutGroup>\n  <div class='grid'>\n    <Presence @items={{this.tiles}} @key={{tileKey}} @mode='popLayout'\n      as |tile h|>\n      <article\n        class='card'\n        {{motion\n          presence=h\n          layout=true        {{! measure before, measure after, animate the difference }}\n          initial=cardIn\n          animate=cardHere\n          exit=cardOut\n          transition=cardSpring\n        }}\n      ><tile.Card @format='fitted' /></article>\n    </Presence>\n  </div>\n</LayoutGroup>\n\n// and the filter itself is just state\nselect = (filter) => {\n  this.filter = filter;\n};`;\n\ninterface Signature {\n  Args: {\n    /** opens a demo card through the host */\n    onOpen: (demo: GalleryDemo) => void;\n    tiles: GalleryTile[];\n  };\n}\n\nexport class GalleryGrid extends Component<Signature> {\n  @tracked filter: string = ALL;\n  /** whether a filter has been chosen yet, which starts the announcements */\n  @tracked private filtered = false;\n\n  /**\n   * Whether the grid still moves tiles to their new seats on a filter.\n   *\n   * `layout=true` measures every surviving tile before and after and animates\n   * the difference. It is also the expensive answer, and this page is dozens\n   * of live demos on one thread. So the first filter of a session is\n   * measured, and if it could not hold a frame rate the grid stops trying:\n   * tiles fade instead. The decision is made once and kept.\n   */\n  @tracked private heavy = reducedMotion();\n\n  /** frames slower than this are the ones a person sees as a stutter */\n  private static readonly SLOW_MS = 34;\n  @tracked code = false;\n\n  get filters(): string[] {\n    let filters = [ALL, ...GROUPS];\n    return this.args.tiles.some(({ demo }) => hasNotes(demo))\n      ? [...filters, DEEP_DIVE]\n      : filters;\n  }\n\n  get tiles(): GalleryTile[] {\n    if (this.filter === ALL) {\n      return this.args.tiles;\n    }\n    if (this.filter === DEEP_DIVE) {\n      return this.args.tiles.filter(({ demo }) => hasNotes(demo));\n    }\n    return this.args.tiles.filter(({ demo }) => demo.group === this.filter);\n  }\n\n  get sample() {\n    return highlightSample(SAMPLE);\n  }\n\n  get panel() {\n    return this.code ? [{ id: 'filter-code' }] : NO_PANEL;\n  }\n\n  isOn = (filter: string) => filter === this.filter;\n\n  /**\n   * What the grid shows, for a status a screen reader announces when a\n   * filter changes it. It stays empty until the first filter, so demos\n   * arriving as the page loads are not counted aloud.\n   */\n  get shown(): string {\n    if (!this.filtered) {\n      return '';\n    }\n    let total = this.args.tiles.length;\n    return this.filter === ALL\n      ? `All ${total} demos`\n      : `${this.filter}: ${this.tiles.length} of ${total} demos`;\n  }\n\n  /**\n   * Watch the frames a filter pass actually got: sampled rather than\n   * predicted, at the cost of one rAF loop lasting about half a second.\n   */\n  private measure() {\n    let last = performance.now();\n    let frames = 0;\n    let slow = 0;\n    const tick = () => {\n      const now = performance.now();\n      const dt = now - last;\n      last = now;\n      frames += 1;\n      // the first frame after a render is long for reasons that are not the\n      // animation's fault, so it is not counted against it\n      if (frames > 1 && dt > GalleryGrid.SLOW_MS) {\n        slow += 1;\n      }\n      if (frames < 34) {\n        requestAnimationFrame(tick);\n      } else if (slow >= 8 && !this.isDestroying) {\n        this.heavy = true;\n      }\n    };\n    requestAnimationFrame(tick);\n  }\n\n  select = (filter: string) => {\n    if (filter === this.filter) {\n      return;\n    }\n    this.filter = filter;\n    this.filtered = true;\n    if (!this.heavy) {\n      this.measure();\n    }\n  };\n\n  get cardMoves() {\n    return !this.heavy;\n  }\n\n  get enterPose() {\n    return this.heavy ? flatIn : cardIn;\n  }\n\n  get herePose() {\n    return this.heavy ? flatHere : cardHere;\n  }\n\n  get exitPose() {\n    return this.heavy ? flatOut : cardOut;\n  }\n\n  get cardTransition() {\n    return this.heavy ? flatFade : cardSpring;\n  }\n\n  toggleCode = () => {\n    this.code = !this.code;\n  };\n\n  /**\n   * A click on a tile that nothing inside it kept: where the host has an\n   * overlay, the overlay has already opened the card and kept the click.\n   */\n  open = (demo: GalleryDemo) => {\n    this.args.onOpen(demo);\n  };\n\n  <template>\n    <section class='hero'>\n      {{! the repo is Choreo; the thing you install is still glimmer-motion,\n        so the eyebrow credits the package by name }}\n      <p class='kicker'>Includes glimmer-motion</p>\n      <h1>Motion,<br /><em>Choreographed.</em></h1>\n      <p class='lede'>\n        The\n        <a\n          href='https://motion.dev'\n          target='_blank'\n          rel='noopener noreferrer'\n        >Motion<span class='sr-only'> (opens in a new tab)</span></a>\n        engine for Ember — and a timeline for the scene.\n      </p>\n      <div class='filter-row'>\n        <div class='filters'>\n          {{#each this.filters as |filter|}}\n            <button\n              type='button'\n              class={{if (this.isOn filter) 'chip is-on' 'chip'}}\n              aria-pressed={{if (this.isOn filter) 'true' 'false'}}\n              {{on 'click' (fn this.select filter)}}\n            >{{filter}}</button>\n          {{/each}}\n        </div>\n        <button\n          type='button'\n          class={{if this.code 'filter-tell is-on' 'filter-tell'}}\n          aria-expanded={{if this.code 'true' 'false'}}\n          {{on 'click' this.toggleCode}}\n        >\n          <span class='filter-tell-mark' aria-hidden='true'>&lt;/&gt;</span>\n          How this filters\n        </button>\n      </div>\n      <p class='sr-only' role='status'>{{this.shown}}</p>\n      <Presence @items={{this.panel}} @key={{panelKey}} as |_panel h|>\n        <section\n          class='filter-code'\n          aria-label='Filter code'\n          {{motion\n            presence=h\n            initial=panelIn\n            animate=panelHere\n            exit=panelOut\n            transition=panelSpring\n          }}\n        >\n          <p class='sample-label'>Glimmer</p>\n          <pre><code>{{this.sample}}</code></pre>\n        </section>\n      </Presence>\n    </section>\n    {{! The filter is the library's own job, not the browser's: layout=true\n      moves the real elements, so the demos keep running the whole way\n      across. }}\n    <LayoutGroup>\n      <div class='grid'>\n        <Presence\n          @items={{this.tiles}}\n          @key={{tileKey}}\n          {{! popLayout, so the grid closes up WHILE the leavers fade rather\n            than after them }}\n          @mode='popLayout'\n          {{! no initial=false: the presence context is INHERITED, so blocking\n            the first entrance would block it for every motion node inside\n            every demo as well }}\n          as |tile h|\n        >\n          {{! The tile is the demo card itself, in its fitted format: the host\n            renders it, so a click anywhere on it opens the demo card. The\n            card's title is its link, and the keyboard's way in; the click\n            here is the mouse's, for a host with no overlay to take it. }}\n          <article\n            {{! template-lint-disable no-invalid-interactive }}\n            class='card'\n            data-gallery-tile={{tile.demo.slug}}\n            {{on 'click' (fn this.open tile.demo)}}\n            {{! a leaving tile is on its way out: it takes no pointer, focus or\n              screen reader, so nothing reaches a tile that is fading away }}\n            inert={{unless h.isPresent true}}\n            {{motion\n              presence=h\n              layout=this.cardMoves\n              initial=this.enterPose\n              animate=this.herePose\n              exit=this.exitPose\n              transition=this.cardTransition\n            }}\n          >\n            <tile.Card @format='fitted' @displayContainer={{false}} />\n          </article>\n        </Presence>\n      </div>\n    </LayoutGroup>\n    <style scoped>\n      /* the hero is a container, so the headline can size against the\n         hero's own width rather than the window's: in a host stack the\n         two differ */\n      .hero {\n        container-type: inline-size;\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);\n        gap: 28px;\n        padding-bottom: 56px;\n        border-bottom: 1px solid var(--line);\n        margin-bottom: 40px;\n      }\n\n      /* the hero's eyebrow is ember, so the word and the rule it draws for\n         itself read as one accent */\n      .kicker {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        margin: 0;\n        font-family: var(--font-mono);\n        font-size: 11px;\n        letter-spacing: 0.18em;\n        text-transform: uppercase;\n        color: var(--eyebrow);\n      }\n\n      .kicker::before {\n        content: '';\n        width: 18px;\n        height: 1px;\n        background: var(--ember);\n        box-shadow: 0 0 12px var(--glow);\n        /* drawn, not just present: the rule runs out from the left as the\n           page arrives */\n        transform-origin: left center;\n        animation: kicker-rule 520ms cubic-bezier(0.2, 0, 0, 1) both;\n      }\n\n      @keyframes kicker-rule {\n        from {\n          transform: scaleX(0);\n        }\n\n        to {\n          transform: scaleX(1);\n        }\n      }\n\n      /* for a viewer who asked for less movement, the rule is simply there */\n      @media (prefers-reduced-motion: reduce) {\n        .kicker::before {\n          animation: none;\n        }\n      }\n\n      h1 {\n        margin: 0;\n        max-width: 14ch;\n        font-family: var(--font-display);\n        font-weight: 800;\n        /* 'Choreographed.' is one word, about 5.5em wide in the condensed\n           face, and can't wrap: 17.5cqi keeps it inside the hero however\n           narrow the hero is, and only binds where the window-sized type\n           would not fit */\n        font-size: min(clamp(3.4rem, 9vw, 7.2rem), 17.5cqi);\n        letter-spacing: -0.055em;\n        line-height: 0.95;\n      }\n\n      /* 'Choreographed.' in Syne at 800 would set the width of the whole\n         heading; the condensed face keeps the word intact and lets the rest\n         stay wide. 1.108em is measured so both lines share a right edge. */\n      h1 em {\n        font-family: var(--font-display-alt);\n        font-weight: 700;\n        font-stretch: 62%;\n        font-variation-settings: 'wdth' 62;\n        font-size: 1.108em;\n        letter-spacing: -0.02em;\n        font-style: normal;\n        color: transparent;\n        /* the tail fades toward --gradient-tail, which is --ink in dark mode\n           and copper in light, where fading to --ink would turn muddy */\n        background: linear-gradient(\n          120deg,\n          var(--ember-hot) 10%,\n          var(--copper) 70%,\n          var(--gradient-tail) 120%\n        );\n        background-clip: text;\n        -webkit-background-clip: text;\n      }\n\n      .lede {\n        max-width: 38rem;\n        margin: 0;\n        color: var(--ink-dim);\n        font-size: 1.125rem;\n      }\n\n      .lede a {\n        color: var(--ink);\n        text-decoration: underline;\n        text-decoration-color: var(--line-strong);\n        text-underline-offset: 3px;\n      }\n\n      @media (hover: hover) {\n        .lede a:hover {\n          color: var(--ember-ink);\n          text-decoration-color: var(--ember-ink);\n        }\n      }\n\n      .filter-row {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        flex-wrap: wrap;\n      }\n\n      .filters {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n\n      .chip {\n        border: 1px solid var(--line);\n        background: transparent;\n        color: var(--ink-dim);\n        border-radius: 999px;\n        padding: 7px 12px;\n        font-family: var(--font-mono);\n        font-size: 11px;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n      }\n\n      @media (hover: hover) {\n        .chip:hover {\n          color: var(--ink);\n          border-color: var(--line-strong);\n          background: var(--bg-spot);\n        }\n      }\n\n      .chip.is-on {\n        border-color: var(--line-strong);\n        background: var(--bg-spot);\n        box-shadow: inset 0 0 0 1px rgba(255, 59, 31, 0.35);\n        /* full ink: the raised ground and the ember ring say selected, and\n           --ember-ink falls under 4.5:1 on --bg-spot in the dark palette */\n        color: var(--ink);\n      }\n\n      /* the tell waits until the row is under the pointer, then says what\n         this is */\n      .filter-tell {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 7px 12px;\n        border: 1px solid transparent;\n        border-radius: 999px;\n        background: none;\n        color: var(--ink-faint);\n        font-family: var(--font-mono);\n        font-size: 10px;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        cursor: pointer;\n        opacity: 0;\n        translate: -6px 0;\n        transition:\n          opacity 160ms ease,\n          translate 160ms ease,\n          color 160ms ease,\n          border-color 160ms ease;\n      }\n\n      .filter-row:focus-within .filter-tell,\n      .filter-tell.is-on {\n        opacity: 1;\n        translate: 0 0;\n      }\n\n      @media (hover: hover) {\n        .filter-row:hover .filter-tell {\n          opacity: 1;\n          translate: 0 0;\n        }\n\n        .filter-tell:hover {\n          color: var(--copper-ink);\n          border-color: var(--line-strong);\n        }\n      }\n\n      /* a tell that waits for a pointer is a tell a finger never sees */\n      @media (hover: none) {\n        .filter-tell {\n          opacity: 1;\n          translate: 0 0;\n        }\n      }\n\n      .filter-tell.is-on {\n        color: var(--copper-ink);\n        border-color: var(--line-strong);\n      }\n\n      .filter-tell-mark {\n        font-size: 11px;\n        letter-spacing: 0;\n        color: var(--ember-ink);\n      }\n\n      .filter-code {\n        border: 1px solid var(--line);\n        border-radius: 16px;\n        background: rgba(var(--surface-tint-rgb), 0.03);\n        overflow: hidden;\n      }\n\n      .sample-label {\n        margin: 0;\n        padding: 14px 18px 0;\n        font-family: var(--font-mono);\n        font-size: 10px;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        color: var(--eyebrow);\n      }\n\n      .filter-code pre {\n        margin: 0;\n        padding: 4px 18px 18px;\n        overflow-x: auto;\n      }\n\n      .filter-code code {\n        font-family: var(--font-mono);\n        font-size: 12px;\n        line-height: 1.55;\n        color: var(--ink);\n        white-space: pre;\n        -webkit-user-select: text;\n        user-select: text;\n      }\n\n      .grid {\n        /* popLayout lifts a leaving tile out of flow and places it against\n           this box, so this box has to be one */\n        position: relative;\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));\n        gap: 16px;\n      }\n\n      /* the tile's box: the demo card's fitted format fills it */\n      .card {\n        position: relative;\n        min-width: 0;\n        height: 540px;\n        border: 1px solid var(--line);\n        border-radius: 18px;\n        /* the tile inside rounds its focus ring to this box's inner edge */\n        --tile-radius: 17px;\n        overflow: hidden;\n        background: var(--bg-elev);\n        cursor: pointer;\n        transition: border-color 180ms var(--ease);\n      }\n\n      @media (hover: hover) {\n        .card:hover {\n          border-color: var(--line-strong);\n        }\n      }\n\n      @media (max-width: 720px) {\n        .hero {\n          gap: 20px;\n          padding-bottom: 36px;\n          margin-bottom: 28px;\n        }\n\n        h1 {\n          font-size: min(clamp(2.6rem, 14vw, 4.4rem), 17.5cqi);\n        }\n\n        .chip {\n          padding: 9px 14px;\n        }\n\n        .filter-code code {\n          font-size: 11px;\n        }\n\n        .card {\n          height: min(520px, 82vh);\n        }\n      }\n    </style>\n  </template>\n}\n";
+var gallery_grid_default = "import type { BoxComponent } from '@cardstack/base/card-api';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { LayoutGroup, motion, Presence } from 'glimmer-motion';\n\nimport { type GalleryDemo, GROUPS } from '../demo';\nimport { highlightSample } from '../lib/highlight';\n\nconst ALL = 'All';\nconst DEEP_DIVE = 'Deep Dive';\n\nconst NO_PANEL: { id: string }[] = [];\n\n/** somebody who has asked not to be moved is not asked twice */\nconst reducedMotion = () =>\n  typeof matchMedia === 'function' &&\n  matchMedia('(prefers-reduced-motion: reduce)').matches;\nconst tileKey = (tile: GalleryTile) => tile.demo.slug;\nconst hasNotes = (demo: GalleryDemo) =>\n  Boolean((demo.constructor as typeof GalleryDemo).notes);\n\n/**\n * One tile of the grid: the demo, and the gallery's field component for it,\n * which renders the demo card in a format of its own. The host owns that\n * component, so a click on the tile opens the demo card through the host.\n */\nexport interface GalleryTile {\n  Card: BoxComponent;\n  demo: GalleryDemo;\n}\n\n/** a tile that was not in the old list arrives; one that survives just moves */\nconst cardIn = { opacity: 0, scale: 0.96 };\nconst cardHere = { opacity: 1, scale: 1 };\nconst cardOut = { opacity: 0, scale: 0.96 };\nconst cardSpring = {\n  bounce: 0.12,\n  type: 'spring',\n  visualDuration: 0.42,\n} as const;\n\n/**\n * The same three poses with the scale taken out, and a tween instead of a\n * spring — what a filter looks like once the grid has stopped moving tiles.\n * A pure opacity change composites, needs no layout read, and does not care\n * how many demos are running underneath it.\n */\nconst flatIn = { opacity: 0 };\nconst flatHere = { opacity: 1 };\nconst flatOut = { opacity: 0 };\nconst flatFade = { duration: 0.18, ease: 'easeOut' } as const;\nconst panelKey = (item: { id: string }) => item.id;\nconst panelIn = { opacity: 0, y: -10 };\nconst panelHere = { opacity: 1, y: 0 };\nconst panelOut = { opacity: 0, y: -6 };\nconst panelSpring = {\n  bounce: 0.14,\n  type: 'spring',\n  visualDuration: 0.34,\n} as const;\n\nconst SAMPLE = `{{! Filtering this list is a layout animation, not a page transition.\n\n    A View Transition would be the obvious reach — and the wrong one here.\n    It works by snapshotting the page into bitmaps and crossfading them, and\n    every tile in this grid is a live demo: running animations would freeze\n    into images for the length of the switch.\n\n    layout=true moves the real elements. The demos keep running while their\n    tiles fly to new seats. }}\n<LayoutGroup>\n  <div class='grid'>\n    <Presence @items={{this.tiles}} @key={{tileKey}} @mode='popLayout'\n      as |tile h|>\n      <article\n        class='card'\n        {{motion\n          presence=h\n          layout=true        {{! measure before, measure after, animate the difference }}\n          initial=cardIn\n          animate=cardHere\n          exit=cardOut\n          transition=cardSpring\n        }}\n      ><tile.Card @format='fitted' /></article>\n    </Presence>\n  </div>\n</LayoutGroup>\n\n// and the filter itself is just state\nselect = (filter) => {\n  this.filter = filter;\n};`;\n\ninterface Signature {\n  Args: {\n    /** opens a demo card through the host */\n    onOpen: (demo: GalleryDemo) => void;\n    tiles: GalleryTile[];\n  };\n}\n\nexport class GalleryGrid extends Component<Signature> {\n  @tracked filter: string = ALL;\n  /** whether a filter has been chosen yet, which starts the announcements */\n  @tracked private filtered = false;\n\n  /**\n   * Whether the grid still moves tiles to their new seats on a filter.\n   *\n   * `layout=true` measures every surviving tile before and after and animates\n   * the difference. It is also the expensive answer, and this page is dozens\n   * of live demos on one thread. So the first filter of a session is\n   * measured, and if it could not hold a frame rate the grid stops trying:\n   * tiles fade instead. The decision is made once and kept.\n   */\n  @tracked private heavy = reducedMotion();\n\n  /** frames slower than this are the ones a person sees as a stutter */\n  private static readonly SLOW_MS = 34;\n  @tracked code = false;\n\n  get filters(): string[] {\n    let filters = [ALL, ...GROUPS];\n    return this.args.tiles.some(({ demo }) => hasNotes(demo))\n      ? [...filters, DEEP_DIVE]\n      : filters;\n  }\n\n  get tiles(): GalleryTile[] {\n    if (this.filter === ALL) {\n      return this.args.tiles;\n    }\n    if (this.filter === DEEP_DIVE) {\n      return this.args.tiles.filter(({ demo }) => hasNotes(demo));\n    }\n    return this.args.tiles.filter(({ demo }) => demo.group === this.filter);\n  }\n\n  get sample() {\n    return highlightSample(SAMPLE);\n  }\n\n  get panel() {\n    return this.code ? [{ id: 'filter-code' }] : NO_PANEL;\n  }\n\n  isOn = (filter: string) => filter === this.filter;\n\n  /**\n   * What the grid shows, for a status a screen reader announces when a\n   * filter changes it. It stays empty until the first filter, so demos\n   * arriving as the page loads are not counted aloud.\n   */\n  get shown(): string {\n    if (!this.filtered) {\n      return '';\n    }\n    let total = this.args.tiles.length;\n    return this.filter === ALL\n      ? `All ${total} demos`\n      : `${this.filter}: ${this.tiles.length} of ${total} demos`;\n  }\n\n  /**\n   * Watch the frames a filter pass actually got: sampled rather than\n   * predicted, at the cost of one rAF loop lasting about half a second.\n   */\n  private measure() {\n    let last = performance.now();\n    let frames = 0;\n    let slow = 0;\n    const tick = () => {\n      const now = performance.now();\n      const dt = now - last;\n      last = now;\n      frames += 1;\n      // the first frame after a render is long for reasons that are not the\n      // animation's fault, so it is not counted against it\n      if (frames > 1 && dt > GalleryGrid.SLOW_MS) {\n        slow += 1;\n      }\n      if (frames < 34) {\n        requestAnimationFrame(tick);\n      } else if (slow >= 8 && !this.isDestroying) {\n        this.heavy = true;\n      }\n    };\n    requestAnimationFrame(tick);\n  }\n\n  select = (filter: string) => {\n    if (filter === this.filter) {\n      return;\n    }\n    this.filter = filter;\n    this.filtered = true;\n    if (!this.heavy) {\n      this.measure();\n    }\n  };\n\n  get cardMoves() {\n    return !this.heavy;\n  }\n\n  get enterPose() {\n    return this.heavy ? flatIn : cardIn;\n  }\n\n  get herePose() {\n    return this.heavy ? flatHere : cardHere;\n  }\n\n  get exitPose() {\n    return this.heavy ? flatOut : cardOut;\n  }\n\n  get cardTransition() {\n    return this.heavy ? flatFade : cardSpring;\n  }\n\n  toggleCode = () => {\n    this.code = !this.code;\n  };\n\n  /**\n   * A click on a tile that nothing inside it kept: where the host has an\n   * overlay, the overlay has already opened the card and kept the click.\n   */\n  open = (demo: GalleryDemo) => {\n    this.args.onOpen(demo);\n  };\n\n  <template>\n    <section class='hero'>\n      {{! the repo is Choreo; the thing you install is still glimmer-motion,\n        so the eyebrow credits the package by name }}\n      <p class='kicker'>Includes glimmer-motion</p>\n      <h1>Motion,<br /><em>Choreographed.</em></h1>\n      <p class='lede'>\n        The\n        <a\n          href='https://motion.dev'\n          target='_blank'\n          rel='noopener noreferrer'\n        >Motion<span class='sr-only'> (opens in a new tab)</span></a>\n        engine for Ember — and a timeline for the scene.\n      </p>\n      <div class='filter-row'>\n        <div class='filters'>\n          {{#each this.filters as |filter|}}\n            <button\n              type='button'\n              class={{if (this.isOn filter) 'chip is-on' 'chip'}}\n              aria-pressed={{if (this.isOn filter) 'true' 'false'}}\n              {{on 'click' (fn this.select filter)}}\n            >{{filter}}</button>\n          {{/each}}\n        </div>\n        <button\n          type='button'\n          class={{if this.code 'filter-tell is-on' 'filter-tell'}}\n          aria-expanded={{if this.code 'true' 'false'}}\n          {{on 'click' this.toggleCode}}\n        >\n          <span class='filter-tell-mark' aria-hidden='true'>&lt;/&gt;</span>\n          How this filters\n        </button>\n      </div>\n      <p class='sr-only' role='status'>{{this.shown}}</p>\n      <Presence @items={{this.panel}} @key={{panelKey}} as |_panel h|>\n        <section\n          class='filter-code'\n          aria-label='Filter code'\n          {{motion\n            presence=h\n            initial=panelIn\n            animate=panelHere\n            exit=panelOut\n            transition=panelSpring\n          }}\n        >\n          <p class='sample-label'>Glimmer</p>\n          <pre><code>{{this.sample}}</code></pre>\n        </section>\n      </Presence>\n    </section>\n    {{! The filter is the library's own job, not the browser's: layout=true\n      moves the real elements, so the demos keep running the whole way\n      across. }}\n    <LayoutGroup>\n      <div class='grid'>\n        <Presence\n          @items={{this.tiles}}\n          @key={{tileKey}}\n          {{! popLayout, so the grid closes up WHILE the leavers fade rather\n            than after them }}\n          @mode='popLayout'\n          {{! no initial=false: the presence context is INHERITED, so blocking\n            the first entrance would block it for every motion node inside\n            every demo as well }}\n          as |tile h|\n        >\n          {{! The tile is the demo card itself, in its fitted format: the host\n            renders it, so a click anywhere on it opens the demo card. The\n            card's title is its link, and the keyboard's way in; the click\n            here is the mouse's, for a host with no overlay to take it. }}\n          <article\n            {{! template-lint-disable no-invalid-interactive }}\n            class='card'\n            data-gallery-tile={{tile.demo.slug}}\n            {{on 'click' (fn this.open tile.demo)}}\n            {{! a leaving tile is on its way out: it takes no pointer, focus or\n              screen reader, so nothing reaches a tile that is fading away }}\n            inert={{unless h.isPresent true}}\n            {{motion\n              presence=h\n              layout=this.cardMoves\n              initial=this.enterPose\n              animate=this.herePose\n              exit=this.exitPose\n              transition=this.cardTransition\n            }}\n          >\n            <tile.Card @format='fitted' @displayContainer={{false}} />\n          </article>\n        </Presence>\n      </div>\n    </LayoutGroup>\n    <style scoped>\n      /* the hero is a container, so the headline can size against the\n         hero's own width rather than the window's: in a host stack the\n         two differ */\n      .hero {\n        container-type: inline-size;\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);\n        gap: 28px;\n        padding-bottom: 56px;\n        border-bottom: 1px solid var(--line);\n        margin-bottom: 40px;\n      }\n\n      /* the hero's eyebrow is ember, so the word and the rule it draws for\n         itself read as one accent */\n      .kicker {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        margin: 0;\n        font-family: var(--font-mono);\n        font-size: 11px;\n        letter-spacing: 0.18em;\n        text-transform: uppercase;\n        color: var(--eyebrow);\n      }\n\n      .kicker::before {\n        content: '';\n        width: 18px;\n        height: 1px;\n        background: var(--ember);\n        box-shadow: 0 0 12px var(--glow);\n        /* drawn, not just present: the rule runs out from the left as the\n           page arrives */\n        transform-origin: left center;\n        animation: kicker-rule 520ms cubic-bezier(0.2, 0, 0, 1) both;\n      }\n\n      @keyframes kicker-rule {\n        from {\n          transform: scaleX(0);\n        }\n\n        to {\n          transform: scaleX(1);\n        }\n      }\n\n      /* for a viewer who asked for less movement, the rule is simply there */\n      @media (prefers-reduced-motion: reduce) {\n        .kicker::before {\n          animation: none;\n        }\n      }\n\n      h1 {\n        margin: 0;\n        max-width: 14ch;\n        font-family: var(--font-display);\n        font-weight: 800;\n        /* 'Choreographed.' is one word, about 5.5em wide in the condensed\n           face, and can't wrap: 17.5cqi keeps it inside the hero however\n           narrow the hero is, and only binds where the window-sized type\n           would not fit */\n        font-size: min(clamp(3.4rem, 9vw, 7.2rem), 17.5cqi);\n        letter-spacing: -0.055em;\n        line-height: 0.95;\n      }\n\n      /* 'Choreographed.' in Syne at 800 would set the width of the whole\n         heading; the condensed face keeps the word intact and lets the rest\n         stay wide. 1.108em is measured so both lines share a right edge. */\n      h1 em {\n        font-family: var(--font-display-alt);\n        font-weight: 700;\n        font-stretch: 62%;\n        font-variation-settings: 'wdth' 62;\n        font-size: 1.108em;\n        letter-spacing: -0.02em;\n        font-style: normal;\n        color: transparent;\n        /* the tail fades toward --gradient-tail, which is --ink in dark mode\n           and copper in light, where fading to --ink would turn muddy.\n           The bright accents are a deliberate brand treatment in both\n           themes. On light cream they fall under the 3:1 large-text\n           minimum (ember-hot 2.4:1, copper about 1.8:1, lower under the\n           page's ember glow). That is a brand choice, not a WCAG pass:\n           the word is display-size heading text, and forced-colors modes\n           repaint it in CanvasText without the gradient.\n           The -ink stops (--ember-ink to --copper-ink) would clear 3:1\n           in light but read too dull for the hero. */\n        background: linear-gradient(\n          120deg,\n          var(--ember-hot) 10%,\n          var(--copper) 70%,\n          var(--gradient-tail) 120%\n        );\n        background-clip: text;\n        -webkit-background-clip: text;\n      }\n\n      .lede {\n        max-width: 38rem;\n        margin: 0;\n        color: var(--ink-dim);\n        font-size: 1.125rem;\n      }\n\n      .lede a {\n        color: var(--ink);\n        text-decoration: underline;\n        text-decoration-color: var(--line-strong);\n        text-underline-offset: 3px;\n      }\n\n      @media (hover: hover) {\n        .lede a:hover {\n          color: var(--ember-ink);\n          text-decoration-color: var(--ember-ink);\n        }\n      }\n\n      .filter-row {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        flex-wrap: wrap;\n      }\n\n      .filters {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n      }\n\n      .chip {\n        border: 1px solid var(--line);\n        background: transparent;\n        color: var(--ink-dim);\n        border-radius: 999px;\n        padding: 7px 12px;\n        font-family: var(--font-mono);\n        font-size: 11px;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n      }\n\n      @media (hover: hover) {\n        .chip:hover {\n          color: var(--ink);\n          border-color: var(--line-strong);\n          background: var(--bg-spot);\n        }\n      }\n\n      .chip.is-on {\n        border-color: var(--line-strong);\n        background: var(--bg-spot);\n        box-shadow: inset 0 0 0 1px rgba(255, 59, 31, 0.35);\n        /* full ink: the raised ground and the ember ring say selected, and\n           --ember-ink falls under 4.5:1 on --bg-spot in the dark palette */\n        color: var(--ink);\n      }\n\n      /* the tell waits until the row is under the pointer, then says what\n         this is */\n      .filter-tell {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 7px 12px;\n        border: 1px solid transparent;\n        border-radius: 999px;\n        background: none;\n        color: var(--ink-faint);\n        font-family: var(--font-mono);\n        font-size: 10px;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        cursor: pointer;\n        opacity: 0;\n        translate: -6px 0;\n        transition:\n          opacity 160ms ease,\n          translate 160ms ease,\n          color 160ms ease,\n          border-color 160ms ease;\n      }\n\n      .filter-row:focus-within .filter-tell,\n      .filter-tell.is-on {\n        opacity: 1;\n        translate: 0 0;\n      }\n\n      @media (hover: hover) {\n        .filter-row:hover .filter-tell {\n          opacity: 1;\n          translate: 0 0;\n        }\n\n        .filter-tell:hover {\n          color: var(--copper-ink);\n          border-color: var(--line-strong);\n        }\n      }\n\n      /* a tell that waits for a pointer is a tell a finger never sees */\n      @media (hover: none) {\n        .filter-tell {\n          opacity: 1;\n          translate: 0 0;\n        }\n      }\n\n      .filter-tell.is-on {\n        color: var(--copper-ink);\n        border-color: var(--line-strong);\n      }\n\n      .filter-tell-mark {\n        font-size: 11px;\n        letter-spacing: 0;\n        color: var(--ember-ink);\n      }\n\n      .filter-code {\n        border: 1px solid var(--line);\n        border-radius: 16px;\n        background: rgba(var(--surface-tint-rgb), 0.03);\n        overflow: hidden;\n      }\n\n      .sample-label {\n        margin: 0;\n        padding: 14px 18px 0;\n        font-family: var(--font-mono);\n        font-size: 10px;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        color: var(--eyebrow);\n      }\n\n      .filter-code pre {\n        margin: 0;\n        padding: 4px 18px 18px;\n        overflow-x: auto;\n      }\n\n      .filter-code code {\n        font-family: var(--font-mono);\n        font-size: 12px;\n        line-height: 1.55;\n        color: var(--ink);\n        white-space: pre;\n        -webkit-user-select: text;\n        user-select: text;\n      }\n\n      .grid {\n        /* popLayout lifts a leaving tile out of flow and places it against\n           this box, so this box has to be one */\n        position: relative;\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));\n        gap: 16px;\n      }\n\n      /* the tile's box: the demo card's fitted format fills it */\n      .card {\n        position: relative;\n        min-width: 0;\n        height: 540px;\n        border: 1px solid var(--line);\n        border-radius: 18px;\n        /* the tile inside rounds its focus ring to this box's inner edge */\n        --tile-radius: 17px;\n        overflow: hidden;\n        background: var(--bg-elev);\n        cursor: pointer;\n        transition: border-color 180ms var(--ease);\n      }\n\n      @media (hover: hover) {\n        .card:hover {\n          border-color: var(--line-strong);\n        }\n      }\n\n      @media (max-width: 720px) {\n        .hero {\n          gap: 20px;\n          padding-bottom: 36px;\n          margin-bottom: 28px;\n        }\n\n        h1 {\n          font-size: min(clamp(2.6rem, 14vw, 4.4rem), 17.5cqi);\n        }\n\n        .chip {\n          padding: 9px 14px;\n        }\n\n        .filter-code code {\n          font-size: 11px;\n        }\n\n        .card {\n          height: min(520px, 82vh);\n        }\n      }\n    </style>\n  </template>\n}\n";
 //#endregion
 //#region ../choreo-gallery/realm/shell/guide-link.gts?raw
 var guide_link_default = "import Component from '@glimmer/component';\n\nimport type { GalleryDemo } from '../demo';\nimport { realmFile } from '../lib/realm-url';\n\ninterface Signature {\n  Args: { demo: GalleryDemo };\n  Element: HTMLAnchorElement;\n}\n\n/**\n * \"Read the guide →\": a real link to the concept guide the demo's lesson\n * names, a Markdown file in the realm's `docs/guides/`. Following it is the\n * host's navigation, so the guide opens as its own file at its own URL.\n */\nexport class GuideLink extends Component<Signature> {\n  get href(): string | undefined {\n    let guide = this.args.demo.lesson?.guide;\n    return guide ? realmFile(`docs/guides/${guide}.md`) : undefined;\n  }\n\n  <template>\n    {{#if this.href}}\n      <a\n        href={{this.href}}\n        class='guide-link'\n        data-demo-guide={{@demo.lesson.guide}}\n        ...attributes\n      >Read the guide <span aria-hidden='true'>→</span></a>\n    {{/if}}\n    <style scoped>\n      .guide-link {\n        font-family: var(--font-mono);\n        font-size: 11px;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n        color: var(--copper-ink);\n      }\n\n      @media (hover: hover) {\n        .guide-link:hover {\n          color: var(--ink);\n        }\n      }\n    </style>\n  </template>\n}\n";

package/bundled-test-harness/assets/{choreo-gallery-build-order-test-vqxi2yVx.js → choreo-gallery-build-order-test-CJMITCCe.js}

@@ -14,7 +14,7 @@ import "./src-Bq3lg4hB.js";
 import { t as MotionModifier } from "./motion-l7EBYFii.js";
 import { t as Presence } from "./presence-BK3mPbV3.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest, r as frames, s as sleep } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, r as frames, s as sleep } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-build-order-test.gts
 /**
 * The Build Order demo: as a popLayout leaver, beside a noisy neighbour, and

package/bundled-test-harness/assets/{choreo-gallery-compositor-test-DhFRJae-.js → choreo-gallery-compositor-test-BVa9Ak-Q.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-compositor-test.ts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
 /** A run that records the transport ops the host performs on it. */

package/bundled-test-harness/assets/{choreo-gallery-cover-test-DmazsR0Z.js → choreo-gallery-cover-test-BFpC-W9i.js}

@@ -5,7 +5,7 @@ import { t as HostModeService } from "./host-mode-service-CI0llN9l.js";
 import { M as waitUntil, a as find, d as click, i as findAll, k as visit, l as triggerEvent, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { F as setupLocalIndexing, I as setupOnSave, ct as setupApplicationTest, j as setupAcceptanceTestRealm, pt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-BekwDdCN.js";
-import { r as choreoGalleryRealmOf } from "./choreo-gallery-BvL1V7P7.js";
+import { r as choreoGalleryRealmOf } from "./choreo-gallery-BKVGWFq7.js";
 //#region tests/acceptance/choreo-gallery-cover-test.gts
 /**
 * A demo card opened from the Choreo gallery covers the gallery without

package/bundled-test-harness/assets/{choreo-gallery-crossing-stage-test-BipANF5u.js → choreo-gallery-crossing-stage-test-BpekNEib.js}

@@ -3,7 +3,7 @@ import { T as settled, a as find } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { t as animationsSettled } from "./test-support-Q2PUhbKs.js";
 import { i as orphanCount, s as strandedTransforms } from "./test-support-dVdCmTGa.js";
-import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames, t as $ } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames, t as $ } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-crossing-stage-test.gts
 /**
 * Crossing: three looping slides, a cut at any phase, and the matching tile

package/bundled-test-harness/assets/{choreo-gallery-demos-alive-test-CDAsZtl-.js → choreo-gallery-demos-alive-test-IOZo64_Z.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-demos-alive-test.gts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
 function rest() {

package/bundled-test-harness/assets/{choreo-gallery-drift-test-EBe6Yaqp.js → choreo-gallery-drift-test-BrPvqI7K.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-drift-test.ts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
 var applied;

package/bundled-test-harness/assets/{choreo-gallery-escort-test-Ceu7TwiV.js → choreo-gallery-escort-test-BgsIKJio.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { a as find, d as click } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-escort-test.gts
 /**
 * Escort — the acceptance page for the opened step vocabulary

package/bundled-test-harness/assets/{choreo-gallery-films-test-DrPpbW3l.js → choreo-gallery-films-test-Cnt3fSqM.js}

@@ -6,7 +6,7 @@ import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestR
 import { r as getService } from "./dist-CPfIHBla.js";
 import { o as setupChoreo } from "./test-support-dVdCmTGa.js";
 import { vt as setupBaseRealm } from "./base-realm-B17zVqh6.js";
-import { t as choreoGalleryContents } from "./choreo-gallery-BvL1V7P7.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-BKVGWFq7.js";
 import { t as renderCard } from "./render-component-B15Z0e2v.js";
 //#region tests/integration/choreo-gallery-films-test.gts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());

package/bundled-test-harness/assets/{choreo-gallery-filter-test-CvKk8l6z.js → choreo-gallery-filter-test-uPxHSrLd.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { d as click } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { a as setupChoreoGalleryTest, i as galleryInstance, n as GALLERY_DEMOS } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, i as galleryInstance, n as GALLERY_DEMOS } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-filter-test.gts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
 /** the catalog: every linked demo, with the group it files under */

package/bundled-test-harness/assets/{choreo-gallery-fold-test-D8X4AXxh.js → choreo-gallery-fold-test-DBtUMaRe.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { T as settled } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { t as animationsSettled } from "./test-support-Q2PUhbKs.js";
-import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-fold-test.gts
 /**
 * The Fold demo's argument, asserted.

package/bundled-test-harness/assets/{choreo-gallery-guides-test-DWi_cZtu.js → choreo-gallery-guides-test-BDijbyEJ.js}

@@ -14,8 +14,8 @@ import { M as waitUntil, d as click, h as render, o as waitFor } from "./dist-BO
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import "./mock-matrix-BekwDdCN.js";
 import { n as live, r as liveAll } from "./test-support-dVdCmTGa.js";
-import { n as choreoGalleryGuides } from "./choreo-gallery-BvL1V7P7.js";
-import { a as setupChoreoGalleryTest, i as galleryInstance, n as GALLERY_DEMOS } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { n as choreoGalleryGuides } from "./choreo-gallery-BKVGWFq7.js";
+import { a as setupChoreoGalleryTest, i as galleryInstance, n as GALLERY_DEMOS } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-guides-test.gts
 /**
 * The guides, their links and the lab: a guide renders from the realm with

package/bundled-test-harness/assets/{choreo-gallery-hang-test-Djmr-Jwl.js → choreo-gallery-hang-test-Cfz_f7kq.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { T as settled } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { t as animationsSettled } from "./test-support-Q2PUhbKs.js";
-import { a as setupChoreoGalleryTest, l as trigger, o as setupStageViewport, r as frames, s as sleep, t as $ } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { a as setupChoreoGalleryTest, l as trigger, o as setupStageViewport, r as frames, s as sleep, t as $ } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-hang-test.gts
 /**
 * Hang's argument, asserted: a throw is READ, and the reading is what puts

package/bundled-test-harness/assets/{choreo-gallery-highlight-test-hKhRmfbB.js → choreo-gallery-highlight-test-Bey3u2C9.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { t as choreoGalleryContents } from "./choreo-gallery-BvL1V7P7.js";
-import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-pQUMuoFC.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-BKVGWFq7.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-ZD1b6EcX.js";
 //#region tests/integration/choreo-gallery-highlight-test.ts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
 var highlightSample;