@cratis/scene.blueprint.default 4.39.0 → 4.41.0

package/dist/esm/foundation/templates/workspaceScreenTemplate.js

@@ -0,0 +1,60 @@
+import { WidthSizeClass } from '@cratis/scene.model';
+import { column, slotLeaf, grid } from '../../layouts/flowBuilders.js';
+import { component, fromQuery, foundationTemplateProvenance, thumbnailOf } from './templateParts.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * A module's own workspace: its sections beside the content of the section in force. The sections are the module's sub-navigation (a left rail that
+ * becomes tabs on a phone); the section in force is kept in the address, so a deep link or a refresh restores it. Feature screens go in `moduleContent`.
+ */ const workspaceScreenTemplate = {
+    name: 'WorkspaceScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'moduleNav'
+        },
+        {
+            name: 'moduleContent'
+        }
+    ],
+    arrangement: {
+        root: grid([
+            slotLeaf('moduleNav'),
+            slotLeaf('moduleContent', {
+                span: 3
+            })
+        ], 4, 16),
+        overrides: [
+            {
+                width: WidthSizeClass.Compact,
+                root: column([
+                    slotLeaf('moduleNav'),
+                    slotLeaf('moduleContent')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        moduleNav: [
+            component('workspace-sections', 'subNavigation', {
+                items: fromQuery('ModuleSections'),
+                orientation: 'vertical',
+                urlKey: 'section',
+                label: 'Module sections'
+            })
+        ],
+        moduleContent: []
+    },
+    displayName: 'Module workspace',
+    description: 'A module\'s sections beside the content of the section that is open.',
+    metadata: {
+        ...foundationTemplateProvenance,
+        type: 'Workspace',
+        category: 'Foundation / Workspace',
+        thumbnail: thumbnailOf('WorkspaceScreen')
+    }
+};
+
+export { workspaceScreenTemplate };
+//# sourceMappingURL=workspaceScreenTemplate.js.map

package/dist/esm/foundation/templates/workspaceScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspaceScreenTemplate.js","sources":["../../../../foundation/templates/workspaceScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * A module's own workspace: its sections beside the content of the section in force. The sections are the module's sub-navigation (a left rail that\n * becomes tabs on a phone); the section in force is kept in the address, so a deep link or a refresh restores it. Feature screens go in `moduleContent`.\n */\nexport const workspaceScreenTemplate: ScreenTemplate = {\n    name: 'WorkspaceScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'moduleNav' }, { name: 'moduleContent' }],\n    arrangement: {\n        root: grid([slotLeaf('moduleNav'), slotLeaf('moduleContent', { span: 3 })], 4, 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('moduleNav'), slotLeaf('moduleContent')], 16) }],\n    },\n    content: {\n        moduleNav: [component('workspace-sections', 'subNavigation', { items: fromQuery('ModuleSections'), orientation: 'vertical', urlKey: 'section', label: 'Module sections' })],\n        moduleContent: [],\n    },\n    displayName: 'Module workspace',\n    description: 'A module\\'s sections beside the content of the section that is open.',\n    metadata: { ...foundationTemplateProvenance, type: 'Workspace', category: 'Foundation / Workspace', thumbnail: thumbnailOf('WorkspaceScreen') },\n};\n"],"names":["workspaceScreenTemplate","name","fitsSlot","slots","arrangement","root","grid","slotLeaf","span","overrides","width","WidthSizeClass","Compact","column","content","moduleNav","component","items","fromQuery","orientation","urlKey","label","moduleContent","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;AAAA;AACA;AAMA;;;UAIaA,uBAAAA,GAA0C;IACnDC,IAAAA,EAAM,iBAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAY,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAgB;AAAE,KAAA;IACzDG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,IAAAA,CAAK;YAACC,QAAAA,CAAS,WAAA,CAAA;AAAcA,YAAAA,QAAAA,CAAS,eAAA,EAAiB;gBAAEC,IAAAA,EAAM;AAAE,aAAA;AAAG,SAAA,EAAE,CAAA,EAAG,EAAA,CAAA;QAC/EC,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,eAAeC,OAAO;AAAEP,gBAAAA,IAAAA,EAAMQ,MAAAA,CAAO;oBAACN,QAAAA,CAAS,WAAA,CAAA;oBAAcA,QAAAA,CAAS,eAAA;iBAAiB,EAAE,EAAA;AAAI;AAAE;AACxH,KAAA;IACAO,OAAAA,EAAS;QACLC,SAAAA,EAAW;AAACC,YAAAA,SAAAA,CAAU,sBAAsB,eAAA,EAAiB;AAAEC,gBAAAA,KAAAA,EAAOC,SAAAA,CAAU,gBAAA,CAAA;gBAAmBC,WAAAA,EAAa,UAAA;gBAAYC,MAAAA,EAAQ,SAAA;gBAAWC,KAAAA,EAAO;AAAkB,aAAA;AAAG,SAAA;AAC3KC,QAAAA,aAAAA,EAAe;AACnB,KAAA;IACAC,WAAAA,EAAa,kBAAA;IACbC,WAAAA,EAAa,sEAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,4BAA4B;QAAEC,IAAAA,EAAM,WAAA;QAAaC,QAAAA,EAAU,wBAAA;AAA0BC,QAAAA,SAAAA,EAAWC,WAAAA,CAAY,iBAAA;AAAmB;AAClJ;;"}

package/dist/esm/foundation/urlState.d.ts

@@ -0,0 +1,4 @@
+export declare function readUrlParameter(name: string): string | undefined;
+export declare function writeUrlParameter(name: string, value: string | undefined): void;
+export declare function useUrlState(key: string | undefined, fallback: string | undefined): [string | undefined, (value: string | undefined) => void];
+//# sourceMappingURL=urlState.d.ts.map

package/dist/esm/foundation/urlState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlState.d.ts","sourceRoot":"","sources":["../../../foundation/urlState.ts"],"names":[],"mappings":"AAMA,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIjE;AAGD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAQ/E;AAcD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,CAgB5I"}

package/dist/esm/foundation/urlState.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** Reads one query-string parameter of the current address, or undefined when it is absent or there is no address (server rendering). */ function readUrlParameter(name) {
+    if (typeof window === 'undefined') return undefined;
+    const value = new URLSearchParams(window.location.search).get(name);
+    return value === null ? undefined : value;
+}
+/** Writes one query-string parameter to the address without adding a history entry; an undefined or empty value removes it. */ function writeUrlParameter(name, value) {
+    if (typeof window === 'undefined') return;
+    const parameters = new URLSearchParams(window.location.search);
+    if (value === undefined || value === '') parameters.delete(name);
+    else parameters.set(name, value);
+    const query = parameters.toString();
+    window.history.replaceState(window.history.state, '', `${window.location.pathname}${query.length > 0 ? `?${query}` : ''}${window.location.hash}`);
+}
+/**
+ * State that lives in the address bar: a list's search, sort, page and filters, a master/detail's selection, a module's active section.
+ *
+ * It starts from the address when the address has a value (so a shared link, a refresh and the back button restore the screen as it was),
+ * otherwise from the fallback the template supplies. Changing it rewrites the address in place and does not add a history entry per keystroke.
+ * Several components on one screen use distinct `key`s; a template names them (`q`, `sort`, `page`, `selected`, `section`). Without a
+ * `urlKey` the state is plain component state, which is what a gallery card and a design surface want.
+ *
+ * @param key The query-string parameter, or undefined to keep the state local.
+ * @param fallback The value used when the address has none.
+ * @returns The value and its setter.
+ */ function useUrlState(key, fallback) {
+    const [value, setValue] = useState(()=>key === undefined ? fallback : readUrlParameter(key) ?? fallback);
+    useEffect(()=>{
+        if (key === undefined) return;
+        const restore = ()=>setValue(readUrlParameter(key) ?? fallback);
+        window.addEventListener('popstate', restore);
+        return ()=>window.removeEventListener('popstate', restore);
+    }, [
+        key,
+        fallback
+    ]);
+    const update = useCallback((next)=>{
+        setValue(next);
+        if (key !== undefined) writeUrlParameter(key, next);
+    }, [
+        key
+    ]);
+    return [
+        value,
+        update
+    ];
+}
+
+export { readUrlParameter, useUrlState, writeUrlParameter };
+//# sourceMappingURL=urlState.js.map

package/dist/esm/foundation/urlState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlState.js","sources":["../../../foundation/urlState.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useCallback, useEffect, useState } from 'react';\n\n/** Reads one query-string parameter of the current address, or undefined when it is absent or there is no address (server rendering). */\nexport function readUrlParameter(name: string): string | undefined {\n    if (typeof window === 'undefined') return undefined;\n    const value = new URLSearchParams(window.location.search).get(name);\n    return value === null ? undefined : value;\n}\n\n/** Writes one query-string parameter to the address without adding a history entry; an undefined or empty value removes it. */\nexport function writeUrlParameter(name: string, value: string | undefined): void {\n    if (typeof window === 'undefined') return;\n    const parameters = new URLSearchParams(window.location.search);\n    if (value === undefined || value === '') parameters.delete(name);\n    else parameters.set(name, value);\n\n    const query = parameters.toString();\n    window.history.replaceState(window.history.state, '', `${window.location.pathname}${query.length > 0 ? `?${query}` : ''}${window.location.hash}`);\n}\n\n/**\n * State that lives in the address bar: a list's search, sort, page and filters, a master/detail's selection, a module's active section.\n *\n * It starts from the address when the address has a value (so a shared link, a refresh and the back button restore the screen as it was),\n * otherwise from the fallback the template supplies. Changing it rewrites the address in place and does not add a history entry per keystroke.\n * Several components on one screen use distinct `key`s; a template names them (`q`, `sort`, `page`, `selected`, `section`). Without a\n * `urlKey` the state is plain component state, which is what a gallery card and a design surface want.\n *\n * @param key The query-string parameter, or undefined to keep the state local.\n * @param fallback The value used when the address has none.\n * @returns The value and its setter.\n */\nexport function useUrlState(key: string | undefined, fallback: string | undefined): [string | undefined, (value: string | undefined) => void] {\n    const [value, setValue] = useState<string | undefined>(() => (key === undefined ? fallback : readUrlParameter(key) ?? fallback));\n\n    useEffect(() => {\n        if (key === undefined) return;\n        const restore = () => setValue(readUrlParameter(key) ?? fallback);\n        window.addEventListener('popstate', restore);\n        return () => window.removeEventListener('popstate', restore);\n    }, [key, fallback]);\n\n    const update = useCallback((next: string | undefined) => {\n        setValue(next);\n        if (key !== undefined) writeUrlParameter(key, next);\n    }, [key]);\n\n    return [value, update];\n}\n"],"names":["readUrlParameter","name","window","undefined","value","URLSearchParams","location","search","get","writeUrlParameter","parameters","delete","set","query","toString","history","replaceState","state","pathname","length","hash","useUrlState","key","fallback","setValue","useState","useEffect","restore","addEventListener","removeEventListener","update","useCallback","next"],"mappings":";;AAAA;AACA;AAIA,0IACO,SAASA,gBAAAA,CAAiBC,IAAY,EAAA;IACzC,IAAI,OAAOC,MAAAA,KAAW,WAAA,EAAa,OAAOC,SAAAA;IAC1C,MAAMC,KAAAA,GAAQ,IAAIC,eAAAA,CAAgBH,MAAAA,CAAOI,QAAQ,CAACC,MAAM,CAAA,CAAEC,GAAG,CAACP,IAAAA,CAAAA;IAC9D,OAAOG,KAAAA,KAAU,OAAOD,SAAAA,GAAYC,KAAAA;AACxC;AAEA,gIACO,SAASK,iBAAAA,CAAkBR,IAAY,EAAEG,KAAyB,EAAA;IACrE,IAAI,OAAOF,WAAW,WAAA,EAAa;AACnC,IAAA,MAAMQ,aAAa,IAAIL,eAAAA,CAAgBH,MAAAA,CAAOI,QAAQ,CAACC,MAAM,CAAA;AAC7D,IAAA,IAAIH,UAAUD,SAAAA,IAAaC,KAAAA,KAAU,EAAA,EAAIM,UAAAA,CAAWC,MAAM,CAACV,IAAAA,CAAAA;SACtDS,UAAAA,CAAWE,GAAG,CAACX,IAAAA,EAAMG,KAAAA,CAAAA;IAE1B,MAAMS,KAAAA,GAAQH,WAAWI,QAAQ,EAAA;AACjCZ,IAAAA,MAAAA,CAAOa,OAAO,CAACC,YAAY,CAACd,MAAAA,CAAOa,OAAO,CAACE,KAAK,EAAE,EAAA,EAAI,CAAA,EAAGf,MAAAA,CAAOI,QAAQ,CAACY,QAAQ,CAAA,EAAGL,KAAAA,CAAMM,MAAM,GAAG,CAAA,GAAI,CAAC,CAAC,EAAEN,KAAAA,CAAAA,CAAO,GAAG,EAAA,CAAA,EAAKX,MAAAA,CAAOI,QAAQ,CAACc,IAAI,CAAA,CAAE,CAAA;AACpJ;AAEA;;;;;;;;;;;AAWC,IACM,SAASC,WAAAA,CAAYC,GAAuB,EAAEC,QAA4B,EAAA;IAC7E,MAAM,CAACnB,KAAAA,EAAOoB,QAAAA,CAAS,GAAGC,QAAAA,CAA6B,IAAOH,GAAAA,KAAQnB,SAAAA,GAAYoB,QAAAA,GAAWvB,gBAAAA,CAAiBsB,GAAAA,CAAAA,IAAQC,QAAAA,CAAAA;IAEtHG,SAAAA,CAAU,IAAA;AACN,QAAA,IAAIJ,QAAQnB,SAAAA,EAAW;AACvB,QAAA,MAAMwB,OAAAA,GAAU,IAAMH,QAAAA,CAASxB,gBAAAA,CAAiBsB,GAAAA,CAAAA,IAAQC,QAAAA,CAAAA;QACxDrB,MAAAA,CAAO0B,gBAAgB,CAAC,UAAA,EAAYD,OAAAA,CAAAA;AACpC,QAAA,OAAO,IAAMzB,MAAAA,CAAO2B,mBAAmB,CAAC,UAAA,EAAYF,OAAAA,CAAAA;IACxD,CAAA,EAAG;AAACL,QAAAA,GAAAA;AAAKC,QAAAA;AAAS,KAAA,CAAA;IAElB,MAAMO,MAAAA,GAASC,YAAY,CAACC,IAAAA,GAAAA;QACxBR,QAAAA,CAASQ,IAAAA,CAAAA;QACT,IAAIV,GAAAA,KAAQnB,SAAAA,EAAWM,iBAAAA,CAAkBa,GAAAA,EAAKU,IAAAA,CAAAA;IAClD,CAAA,EAAG;AAACV,QAAAA;AAAI,KAAA,CAAA;IAER,OAAO;AAAClB,QAAAA,KAAAA;AAAO0B,QAAAA;AAAO,KAAA;AAC1B;;"}

package/dist/esm/foundation/useCompactWidth.d.ts

@@ -0,0 +1,3 @@
+export declare const compactQuery = "(max-width: 40rem)";
+export declare function useCompactWidth(): boolean;
+//# sourceMappingURL=useCompactWidth.d.ts.map

package/dist/esm/foundation/useCompactWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCompactWidth.d.ts","sourceRoot":"","sources":["../../../foundation/useCompactWidth.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,uBAAuB,CAAC;AAGjD,wBAAgB,eAAe,IAAI,OAAO,CAazC"}

package/dist/esm/foundation/useCompactWidth.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The width below which a screen is a phone's: the collapse rules of Part B 1.3 (list to cards, master-detail to stack) apply under it. */ const compactQuery = '(max-width: 40rem)';
+/** Whether the viewport is phone-wide, kept up to date. Without `matchMedia` (a test environment, server rendering) it is false, so the full layout renders. */ function useCompactWidth() {
+    const [compact, setCompact] = useState(()=>typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(compactQuery).matches);
+    useEffect(()=>{
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+        const query = window.matchMedia(compactQuery);
+        const update = ()=>setCompact(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return ()=>query.removeEventListener('change', update);
+    }, []);
+    return compact;
+}
+
+export { compactQuery, useCompactWidth };
+//# sourceMappingURL=useCompactWidth.js.map

package/dist/esm/foundation/useCompactWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCompactWidth.js","sources":["../../../foundation/useCompactWidth.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useState } from 'react';\n\n/** The width below which a screen is a phone's: the collapse rules of Part B 1.3 (list to cards, master-detail to stack) apply under it. */\nexport const compactQuery = '(max-width: 40rem)';\n\n/** Whether the viewport is phone-wide, kept up to date. Without `matchMedia` (a test environment, server rendering) it is false, so the full layout renders. */\nexport function useCompactWidth(): boolean {\n    const [compact, setCompact] = useState(() => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(compactQuery).matches);\n\n    useEffect(() => {\n        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n        const query = window.matchMedia(compactQuery);\n        const update = () => setCompact(query.matches);\n        update();\n        query.addEventListener('change', update);\n        return () => query.removeEventListener('change', update);\n    }, []);\n\n    return compact;\n}\n"],"names":["compactQuery","useCompactWidth","compact","setCompact","useState","window","matchMedia","matches","useEffect","query","update","addEventListener","removeEventListener"],"mappings":";;AAAA;AACA;AAIA,6IACO,MAAMA,YAAAA,GAAe;AAE5B,iKACO,SAASC,eAAAA,GAAAA;AACZ,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,QAAAA,CAAS,IAAM,OAAOC,MAAAA,KAAW,WAAA,IAAe,OAAOA,MAAAA,CAAOC,UAAU,KAAK,UAAA,IAAcD,OAAOC,UAAU,CAACN,cAAcO,OAAO,CAAA;IAEhKC,SAAAA,CAAU,IAAA;AACN,QAAA,IAAI,OAAOH,MAAAA,KAAW,WAAA,IAAe,OAAOA,MAAAA,CAAOC,UAAU,KAAK,UAAA,EAAY;QAC9E,MAAMG,KAAAA,GAAQJ,MAAAA,CAAOC,UAAU,CAACN,YAAAA,CAAAA;AAChC,QAAA,MAAMU,MAAAA,GAAS,IAAMP,UAAAA,CAAWM,KAAAA,CAAMF,OAAO,CAAA;AAC7CG,QAAAA,MAAAA,EAAAA;QACAD,KAAAA,CAAME,gBAAgB,CAAC,QAAA,EAAUD,MAAAA,CAAAA;AACjC,QAAA,OAAO,IAAMD,KAAAA,CAAMG,mBAAmB,CAAC,QAAA,EAAUF,MAAAA,CAAAA;AACrD,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,OAAOR,OAAAA;AACX;;"}

package/dist/esm/foundation/wizardModel.d.ts

@@ -0,0 +1,16 @@
+export interface WizardStep {
+    id: string;
+    label: string;
+    valid: boolean;
+}
+export declare enum StepStatus {
+    Completed = "completed",
+    Current = "current",
+    Upcoming = "upcoming"
+}
+export declare function readWizardSteps(value: unknown): WizardStep[];
+export declare function reachableStep(steps: WizardStep[], completed: ReadonlySet<string>, requested: string | undefined): string | undefined;
+export declare function statusOf(completed: ReadonlySet<string>, current: string | undefined, id: string): StepStatus;
+export declare function canOpen(steps: WizardStep[], completed: ReadonlySet<string>, id: string): boolean;
+export declare const neighbour: (steps: WizardStep[], id: string | undefined, direction: -1 | 1) => WizardStep | undefined;
+//# sourceMappingURL=wizardModel.d.ts.map

package/dist/esm/foundation/wizardModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardModel.d.ts","sourceRoot":"","sources":["../../../foundation/wizardModel.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,OAAO,CAAC;CAClB;AAGD,oBAAY,UAAU;IAClB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACxB;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU,EAAE,CAW5D;AAGD,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKpI;AAGD,wBAAgB,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,UAAU,CAG5G;AAGD,wBAAgB,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAGhG;AAGD,eAAO,MAAM,SAAS,UAAW,UAAU,EAAE,MAAM,MAAM,GAAG,SAAS,aAAa,CAAC,CAAC,GAAG,CAAC,KAAG,UAAU,GAAG,SAAuE,CAAC"}

package/dist/esm/foundation/wizardModel.js

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** One step of a wizard. */ /** Where a step stands for the person going through the wizard. */ var StepStatus = /*#__PURE__*/ function(StepStatus) {
+    StepStatus["Completed"] = "completed";
+    StepStatus["Current"] = "current";
+    StepStatus["Upcoming"] = "upcoming";
+    return StepStatus;
+}({});
+/** Reads steps, dropping those without an id and repeated ids. */ function readWizardSteps(value) {
+    if (!Array.isArray(value)) return [];
+    const seen = new Set();
+    return value.flatMap((entry)=>{
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { id, label, valid } = entry;
+        if (typeof id !== 'string' || id.length === 0 || seen.has(id)) return [];
+        seen.add(id);
+        return [
+            {
+                id,
+                label: typeof label === 'string' && label.length > 0 ? label : id,
+                valid: valid !== false
+            }
+        ];
+    });
+}
+/** The step to show: the requested one when it exists and every step before it is completed, else the furthest step that is reachable. A refresh can never land past a step that was not done. */ function reachableStep(steps, completed, requested) {
+    const wanted = steps.findIndex((step)=>step.id === requested);
+    let furthest = 0;
+    while(furthest < steps.length - 1 && completed.has(steps[furthest].id))furthest++;
+    return steps[wanted >= 0 && wanted <= furthest ? wanted : furthest]?.id;
+}
+/** The status of a step: the current one, a completed one (revisitable), or upcoming. */ function statusOf(completed, current, id) {
+    if (id === current) return "current";
+    return completed.has(id) ? "completed" : "upcoming";
+}
+/** Whether a step may be opened from the progress indicator: a completed one, the current one, or the next one when the current is done. */ function canOpen(steps, completed, id) {
+    const index = steps.findIndex((step)=>step.id === id);
+    return index === 0 || steps.slice(0, index).every((step)=>completed.has(step.id));
+}
+/** The step before or after another, or undefined at either end. */ const neighbour = (steps, id, direction)=>steps[steps.findIndex((step)=>step.id === id) + direction];
+
+export { StepStatus, canOpen, neighbour, reachableStep, readWizardSteps, statusOf };
+//# sourceMappingURL=wizardModel.js.map

package/dist/esm/foundation/wizardModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardModel.js","sources":["../../../foundation/wizardModel.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/** One step of a wizard. */\nexport interface WizardStep {\n    id: string;\n    label: string;\n    /** Whether the step's own fields are valid; a step that is not valid blocks Next. Defaults to true. */\n    valid: boolean;\n}\n\n/** Where a step stands for the person going through the wizard. */\nexport enum StepStatus {\n    Completed = 'completed',\n    Current = 'current',\n    Upcoming = 'upcoming',\n}\n\n/** Reads steps, dropping those without an id and repeated ids. */\nexport function readWizardSteps(value: unknown): WizardStep[] {\n    if (!Array.isArray(value)) return [];\n\n    const seen = new Set<string>();\n    return value.flatMap((entry): WizardStep[] => {\n        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];\n        const { id, label, valid } = entry as Record<string, unknown>;\n        if (typeof id !== 'string' || id.length === 0 || seen.has(id)) return [];\n        seen.add(id);\n        return [{ id, label: typeof label === 'string' && label.length > 0 ? label : id, valid: valid !== false }];\n    });\n}\n\n/** The step to show: the requested one when it exists and every step before it is completed, else the furthest step that is reachable. A refresh can never land past a step that was not done. */\nexport function reachableStep(steps: WizardStep[], completed: ReadonlySet<string>, requested: string | undefined): string | undefined {\n    const wanted = steps.findIndex(step => step.id === requested);\n    let furthest = 0;\n    while (furthest < steps.length - 1 && completed.has(steps[furthest].id)) furthest++;\n    return steps[wanted >= 0 && wanted <= furthest ? wanted : furthest]?.id;\n}\n\n/** The status of a step: the current one, a completed one (revisitable), or upcoming. */\nexport function statusOf(completed: ReadonlySet<string>, current: string | undefined, id: string): StepStatus {\n    if (id === current) return StepStatus.Current;\n    return completed.has(id) ? StepStatus.Completed : StepStatus.Upcoming;\n}\n\n/** Whether a step may be opened from the progress indicator: a completed one, the current one, or the next one when the current is done. */\nexport function canOpen(steps: WizardStep[], completed: ReadonlySet<string>, id: string): boolean {\n    const index = steps.findIndex(step => step.id === id);\n    return index === 0 || steps.slice(0, index).every(step => completed.has(step.id));\n}\n\n/** The step before or after another, or undefined at either end. */\nexport const neighbour = (steps: WizardStep[], id: string | undefined, direction: -1 | 1): WizardStep | undefined => steps[steps.findIndex(step => step.id === id) + direction];\n"],"names":["StepStatus","readWizardSteps","value","Array","isArray","seen","Set","flatMap","entry","id","label","valid","length","has","add","reachableStep","steps","completed","requested","wanted","findIndex","step","furthest","statusOf","current","canOpen","index","slice","every","neighbour","direction"],"mappings":"AAAA;AACA;AAEA,iGASO,IAAA,UAAKA,iBAAAA,SAAAA,UAAAA,EAAAA;;;;AAAAA,IAAAA,OAAAA,UAAAA;AAIX,CAAA,CAAA,EAAA;AAED,mEACO,SAASC,eAAAA,CAAgBC,KAAc,EAAA;AAC1C,IAAA,IAAI,CAACC,KAAAA,CAAMC,OAAO,CAACF,KAAAA,CAAAA,EAAQ,OAAO,EAAE;AAEpC,IAAA,MAAMG,OAAO,IAAIC,GAAAA,EAAAA;IACjB,OAAOJ,KAAAA,CAAMK,OAAO,CAAC,CAACC,KAAAA,GAAAA;QAClB,IAAI,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAU,IAAA,IAAQL,MAAMC,OAAO,CAACI,KAAAA,CAAAA,EAAQ,OAAO,EAAE;AAClF,QAAA,MAAM,EAAEC,EAAE,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGH,KAAAA;AAC7B,QAAA,IAAI,OAAOC,EAAAA,KAAO,QAAA,IAAYA,EAAAA,CAAGG,MAAM,KAAK,CAAA,IAAKP,IAAAA,CAAKQ,GAAG,CAACJ,EAAAA,CAAAA,EAAK,OAAO,EAAE;AACxEJ,QAAAA,IAAAA,CAAKS,GAAG,CAACL,EAAAA,CAAAA;QACT,OAAO;AAAC,YAAA;AAAEA,gBAAAA,EAAAA;AAAIC,gBAAAA,KAAAA,EAAO,OAAOA,KAAAA,KAAU,QAAA,IAAYA,MAAME,MAAM,GAAG,IAAIF,KAAAA,GAAQD,EAAAA;AAAIE,gBAAAA,KAAAA,EAAOA,KAAAA,KAAU;AAAM;AAAE,SAAA;AAC9G,IAAA,CAAA,CAAA;AACJ;AAEA,mMACO,SAASI,aAAAA,CAAcC,KAAmB,EAAEC,SAA8B,EAAEC,SAA6B,EAAA;IAC5G,MAAMC,MAAAA,GAASH,MAAMI,SAAS,CAACC,CAAAA,IAAAA,GAAQA,IAAAA,CAAKZ,EAAE,KAAKS,SAAAA,CAAAA;AACnD,IAAA,IAAII,QAAAA,GAAW,CAAA;AACf,IAAA,MAAOA,QAAAA,GAAWN,KAAAA,CAAMJ,MAAM,GAAG,CAAA,IAAKK,SAAAA,CAAUJ,GAAG,CAACG,KAAK,CAACM,QAAAA,CAAS,CAACb,EAAE,CAAA,CAAGa,QAAAA,EAAAA;IACzE,OAAON,KAAK,CAACG,MAAAA,IAAU,CAAA,IAAKA,UAAUG,QAAAA,GAAWH,MAAAA,GAASG,SAAS,EAAEb,EAAAA;AACzE;AAEA,0FACO,SAASc,QAAAA,CAASN,SAA8B,EAAEO,OAA2B,EAAEf,EAAU,EAAA;AAC5F,IAAA,IAAIA,OAAOe,OAAAA,EAAS,OAAA,SAAA;IACpB,OAAOP,SAAAA,CAAUJ,GAAG,CAACJ,EAAAA,CAAAA,GAAAA,WAAAA,GAAAA,UAAAA;AACzB;AAEA,6IACO,SAASgB,OAAAA,CAAQT,KAAmB,EAAEC,SAA8B,EAAER,EAAU,EAAA;IACnF,MAAMiB,KAAAA,GAAQV,MAAMI,SAAS,CAACC,CAAAA,IAAAA,GAAQA,IAAAA,CAAKZ,EAAE,KAAKA,EAAAA,CAAAA;AAClD,IAAA,OAAOiB,KAAAA,KAAU,CAAA,IAAKV,KAAAA,CAAMW,KAAK,CAAC,CAAA,EAAGD,KAAAA,CAAAA,CAAOE,KAAK,CAACP,CAAAA,IAAAA,GAAQJ,SAAAA,CAAUJ,GAAG,CAACQ,KAAKZ,EAAE,CAAA,CAAA;AACnF;AAEA,qEACO,MAAMoB,SAAAA,GAAY,CAACb,KAAAA,EAAqBP,EAAAA,EAAwBqB,YAA8Cd,KAAK,CAACA,MAAMI,SAAS,CAACC,CAAAA,IAAAA,GAAQA,IAAAA,CAAKZ,EAAE,KAAKA,EAAAA,CAAAA,GAAMqB;;"}

package/dist/esm/gallery/GalleryScreenPreview.d.ts

@@ -1,6 +1,7 @@
-import { Theme } from '@cratis/scene.model';
+import { SampleDataPack, SceneElement, Theme } from '@cratis/scene.model';
 import { ComponentRegistry } from '@cratis/scene.react';
 import { LayoutConfigState } from '../configuration';
+import { ComponentState } from '../foundation';
 import { TemplatePreviewState } from './TemplatePreviewState';
 export declare const galleryPreviewRegistry: ComponentRegistry;
 export interface GalleryScreenPreviewProps {
@@ -9,6 +10,16 @@ export interface GalleryScreenPreviewProps {
     themes?: Theme[];
     registry?: ComponentRegistry;
     state?: TemplatePreviewState;
+    pack?: SampleDataPack;
+    forceState?: ForcedComponentState;
 }
-export declare function GalleryScreenPreview({ screenName, initialConfig, themes, registry, state }: GalleryScreenPreviewProps): import("react").JSX.Element;
+export interface ForcedComponentState {
+    state: ComponentState;
+    error?: string;
+    permissionSubject?: string;
+    failedRegions?: string[];
+}
+export declare function forceComponentState(element: SceneElement, forced: ForcedComponentState): SceneElement;
+export declare const queryResultsOf: (pack: SampleDataPack | undefined, state?: TemplatePreviewState) => Record<string, unknown> | undefined;
+export declare function GalleryScreenPreview({ screenName, initialConfig, themes, registry, state, pack, forceState }: GalleryScreenPreviewProps): import("react").JSX.Element;
 //# sourceMappingURL=GalleryScreenPreview.d.ts.map

package/dist/esm/gallery/GalleryScreenPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryScreenPreview.d.ts","sourceRoot":"","sources":["../../../gallery/GalleryScreenPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAoC,MAAM,qBAAqB,CAAC;AAC1F,OAAO,EAAwB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAO3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAU9D,eAAO,MAAM,sBAAsB,EAAE,iBAAwE,CAAC;AAE9G,MAAM,WAAW,yBAAyB;IAEtC,UAAU,EAAE,MAAM,CAAC;IAGnB,aAAa,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAG3C,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAGjB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAG7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAeD,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,MAA+B,EAAE,QAAiC,EAAE,KAAsC,EAAE,EAAE,yBAAyB,+BAiBxM"}
+{"version":3,"file":"GalleryScreenPreview.d.ts","sourceRoot":"","sources":["../../../gallery/GalleryScreenPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,cAAc,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAoC,MAAM,qBAAqB,CAAC;AAC1F,OAAO,EAAwB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAC;AAOlE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAU9D,eAAO,MAAM,sBAAsB,EAAE,iBAAwE,CAAC;AAE9G,MAAM,WAAW,yBAAyB;IAEtC,UAAU,EAAE,MAAM,CAAC;IAGnB,aAAa,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAG3C,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAGjB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAG7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAM7B,IAAI,CAAC,EAAE,cAAc,CAAC;IAOtB,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAGD,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAQD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,oBAAoB,GAAG,YAAY,CAarG;AASD,eAAO,MAAM,cAAc,SAAU,cAAc,GAAG,SAAS,UAAS,oBAAoB,KAAoC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAIzJ,CAAC;AAeF,wBAAgB,oBAAoB,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,MAA+B,EAAE,QAAiC,EAAE,KAAsC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,yBAAyB,+BAkB1N"}

package/dist/esm/gallery/GalleryScreenPreview.js

@@ -2,9 +2,26 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { coreComponents, SceneElementView } from '@cratis/scene.react';
 import { LayoutConfigProvider } from '../configuration/LayoutConfigProvider.js';
+import { ComponentName } from '../ComponentName.js';
 import { defaultBlueprintComponents } from '../defaultBlueprintComponents.js';
+import '../foundation/ComponentState.js';
+import '../foundation/ActivityFeed.js';
+import '../foundation/ApprovalChainStepper.js';
+import '../foundation/foundationDescriptors.js';
+import '../foundation/foundationComponentMetadata.js';
+import { foundationSamples } from '../foundation/foundationSamples.js';
+import { defaultBlueprintName } from '../packageName.js';
 import { defaultBlueprintThemes } from '../themes/defaultBlueprintThemes.js';
 import { LayoutThemeProvider } from '../themes/LayoutThemeProvider.js';
+import '../foundation/templates/boardScreenTemplate.js';
+import '../foundation/templates/dashboardScreenTemplate.js';
+import '../foundation/templates/formScreenTemplate.js';
+import '../foundation/templates/listScreenTemplate.js';
+import '../foundation/templates/masterDetailScreenTemplate.js';
+import '../foundation/templates/recordPageTemplate.js';
+import '../foundation/templates/wizardScreenTemplate.js';
+import '../foundation/templates/workspaceScreenTemplate.js';
+import '../foundation/templates/templateParts.js';
 import { composeScreenElement } from './composeScreen.js';
 import { galleryComponentCatalog, galleryPreviewProfile } from './previewProfile.js';
 import { resolveElementComponentNames } from './resolveElementNames.js';
@@ -22,6 +39,56 @@ import { applyTemplatePreviewState } from './applyTemplatePreviewState.js';
     ...coreComponents,
     ...defaultBlueprintComponents
 };
+/** Components that are chrome or controls rather than data-showing regions, and so do not own the five states. */ const withoutStates = new Set([
+    ComponentName.EmptyState,
+    ComponentName.TrendChip,
+    ComponentName.StatusChip,
+    ComponentName.BulkBar,
+    ComponentName.GlobalSearch,
+    ComponentName.NotificationsButton
+]);
+/** Sets the forced state on every region that owns the five states, leaving chrome and controls as they are. */ function forceComponentState(element, forced) {
+    const external = element;
+    const children = element.children;
+    const slots = external.slots ? Object.fromEntries(Object.entries(external.slots).map(([slot, inner])=>[
+            slot,
+            inner.map((child)=>forceComponentState(child, forced))
+        ])) : undefined;
+    const bare = typeof external.componentName === 'string' ? external.componentName.substring(external.componentName.lastIndexOf(':') + 1) : undefined;
+    const owns = bare !== undefined && external.componentName.includes(defaultBlueprintName) && bare in foundationSamples && foundationSamples[bare].stateful && !withoutStates.has(bare);
+    return {
+        ...element,
+        ...owns ? {
+            properties: {
+                ...external.properties,
+                ...forced
+            }
+        } : {},
+        ...slots ? {
+            slots
+        } : {},
+        ...children ? {
+            children: children.map((child)=>forceComponentState(child, forced))
+        } : {}
+    };
+}
+/**
+ * A pack as the query results the templates bind to: one entry for each set, keyed by the set's shape name.
+ *
+ * The state is a property of the *data*, not of the template: Empty answers every query with no rows; Loading and Error withhold the answer, which is
+ * what a query that has not come back or has failed looks like to a component, so each shows its own skeleton or error exactly as it will in an application.
+ * The elements themselves are untouched, which is why the same template previews in every state with no per-template code.
+ */ const queryResultsOf = (pack, state = TemplatePreviewState.Populated)=>{
+    if (pack === undefined) return undefined;
+    if (state === TemplatePreviewState.Empty) return Object.fromEntries(pack.sets.map((set)=>[
+            set.shape,
+            []
+        ]));
+    return Object.fromEntries(pack.sets.map((set)=>[
+            set.shape,
+            set.rows
+        ]));
+};
 /**
  * Boots one gallery screen through the real engine.
  *
@@ -34,16 +101,18 @@ import { applyTemplatePreviewState } from './applyTemplatePreviewState.js';
  * come out as `UnresolvedComponent`'s dashed red box naming what is missing. That is the designed outcome:
  * a preview of a blueprint against half a profile should look visibly incomplete rather than quietly
  * wrong.
- */ function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry, state = TemplatePreviewState.Populated }) {
+ */ function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry, state = TemplatePreviewState.Populated, pack, forceState }) {
     const element = useMemo(()=>{
         const screen = galleryScreen(screenName);
         if (!screen) {
             throw new Error(`The gallery has no screen named '${screenName}'.`);
         }
-        return applyTemplatePreviewState(resolveElementComponentNames(composeScreenElement(screen), galleryPreviewProfile, galleryComponentCatalog), state);
+        const resolved = applyTemplatePreviewState(resolveElementComponentNames(composeScreenElement(screen), galleryPreviewProfile, galleryComponentCatalog), state);
+        return forceState ? forceComponentState(resolved, forceState) : resolved;
     }, [
         screenName,
-        state
+        state,
+        forceState
     ]);
     return /*#__PURE__*/ jsx(LayoutConfigProvider, {
         initialConfig: initialConfig,
@@ -53,11 +122,12 @@ import { applyTemplatePreviewState } from './applyTemplatePreviewState.js';
             children: /*#__PURE__*/ jsx(SceneElementView, {
                 element: element,
                 registry: registry,
-                resolveBinding: ()=>undefined
+                resolveBinding: ()=>undefined,
+                queryResults: queryResultsOf(pack, state)
             })
         })
     });
 }
 
-export { GalleryScreenPreview, galleryPreviewRegistry };
+export { GalleryScreenPreview, forceComponentState, galleryPreviewRegistry, queryResultsOf };
 //# sourceMappingURL=GalleryScreenPreview.js.map

package/dist/esm/gallery/GalleryScreenPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryScreenPreview.js","sources":["../../../gallery/GalleryScreenPreview.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { Theme } from '@cratis/scene.model';\nimport { ComponentRegistry, SceneElementView, coreComponents } from '@cratis/scene.react';\nimport { LayoutConfigProvider, LayoutConfigState } from '../configuration';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { LayoutThemeProvider, defaultBlueprintThemes } from '../themes';\nimport { composeScreenElement } from './composeScreen';\nimport { galleryComponentCatalog, galleryPreviewProfile } from './previewProfile';\nimport { resolveElementComponentNames } from './resolveElementNames';\nimport { galleryScreen } from './screens';\nimport { TemplatePreviewState } from './TemplatePreviewState';\nimport { applyTemplatePreviewState } from './applyTemplatePreviewState';\n\n/**\n * The registry a preview resolves against when a host does not supply one: `core` plus this blueprint.\n *\n * Merged by hand rather than through `mergePackageRegistries`, because reaching for this blueprint's\n * *bundle* here would be circular - the bundle is assembled from the gallery this file belongs to. Registry\n * keys carry their package name, so merge order cannot cause a collision either way.\n */\nexport const galleryPreviewRegistry: ComponentRegistry = { ...coreComponents, ...defaultBlueprintComponents };\n\nexport interface GalleryScreenPreviewProps {\n    /** The name of the gallery screen to boot. */\n    screenName: string;\n\n    /** Configuration to start from - a story pinning a mode, or a host restoring a session. */\n    initialConfig?: Partial<LayoutConfigState>;\n\n    /** The themes the configurator may switch between. Defaults to the two this blueprint ships. */\n    themes?: Theme[];\n\n    /** The component registry to render against. Defaults to `core` plus this blueprint's own components. */\n    registry?: ComponentRegistry;\n\n    /** The data state to show. Defaults to the seeded, populated records. */\n    state?: TemplatePreviewState;\n}\n\n/**\n * Boots one gallery screen through the real engine.\n *\n * Nothing here is a preview-only path: the screen is a real {@link Screen}, its element tree is resolved by\n * the real `resolveComponentName`, and it is rendered by the real `SceneElementView` against the real\n * registry. That is the point of shipping a gallery at all - a mockup proves that someone can draw a\n * dashboard, and this proves the blueprint renders one.\n *\n * Component names belonging to packages the host has not loaded resolve but find no implementation, and\n * come out as `UnresolvedComponent`'s dashed red box naming what is missing. That is the designed outcome:\n * a preview of a blueprint against half a profile should look visibly incomplete rather than quietly\n * wrong.\n */\nexport function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry, state = TemplatePreviewState.Populated }: GalleryScreenPreviewProps) {\n    const element = useMemo(() => {\n        const screen = galleryScreen(screenName);\n        if (!screen) {\n            throw new Error(`The gallery has no screen named '${screenName}'.`);\n        }\n\n        return applyTemplatePreviewState(resolveElementComponentNames(composeScreenElement(screen), galleryPreviewProfile, galleryComponentCatalog), state);\n    }, [screenName, state]);\n\n    return (\n        <LayoutConfigProvider initialConfig={initialConfig} storage={null}>\n            <LayoutThemeProvider themes={themes}>\n                <SceneElementView element={element} registry={registry} resolveBinding={() => undefined} />\n            </LayoutThemeProvider>\n        </LayoutConfigProvider>\n    );\n}\n"],"names":["galleryPreviewRegistry","coreComponents","defaultBlueprintComponents","GalleryScreenPreview","screenName","initialConfig","themes","defaultBlueprintThemes","registry","state","TemplatePreviewState","Populated","element","useMemo","screen","galleryScreen","Error","applyTemplatePreviewState","resolveElementComponentNames","composeScreenElement","galleryPreviewProfile","galleryComponentCatalog","_jsx","LayoutConfigProvider","storage","LayoutThemeProvider","SceneElementView","resolveBinding","undefined"],"mappings":";;;;;;;;;;;;;;AAgBA;;;;;;UAOaA,sBAAAA,GAA4C;AAAE,IAAA,GAAGC,cAAc;AAAE,IAAA,GAAGC;AAA2B;AAmB5G;;;;;;;;;;;;AAYC,IACM,SAASC,oBAAAA,CAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,MAAAA,GAASC,sBAAsB,EAAEC,QAAAA,GAAWR,sBAAsB,EAAES,KAAAA,GAAQC,oBAAAA,CAAqBC,SAAS,EAA6B,EAAA;AACrM,IAAA,MAAMC,UAAUC,OAAAA,CAAQ,IAAA;AACpB,QAAA,MAAMC,SAASC,aAAAA,CAAcX,UAAAA,CAAAA;AAC7B,QAAA,IAAI,CAACU,MAAAA,EAAQ;AACT,YAAA,MAAM,IAAIE,KAAAA,CAAM,CAAC,iCAAiC,EAAEZ,UAAAA,CAAW,EAAE,CAAC,CAAA;AACtE,QAAA;AAEA,QAAA,OAAOa,yBAAAA,CAA0BC,4BAAAA,CAA6BC,oBAAAA,CAAqBL,MAAAA,CAAAA,EAASM,uBAAuBC,uBAAAA,CAAAA,EAA0BZ,KAAAA,CAAAA;IACjJ,CAAA,EAAG;AAACL,QAAAA,UAAAA;AAAYK,QAAAA;AAAM,KAAA,CAAA;AAEtB,IAAA,qBACIa,GAAA,CAACC,oBAAAA,EAAAA;QAAqBlB,aAAAA,EAAeA,aAAAA;QAAemB,OAAAA,EAAS,IAAA;AACzD,QAAA,QAAA,gBAAAF,GAAA,CAACG,mBAAAA,EAAAA;YAAoBnB,MAAAA,EAAQA,MAAAA;AACzB,YAAA,QAAA,gBAAAgB,GAAA,CAACI,gBAAAA,EAAAA;gBAAiBd,OAAAA,EAASA,OAAAA;gBAASJ,QAAAA,EAAUA,QAAAA;AAAUmB,gBAAAA,cAAAA,EAAgB,IAAMC;;;;AAI9F;;"}
+{"version":3,"file":"GalleryScreenPreview.js","sources":["../../../gallery/GalleryScreenPreview.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { ExternalComponent, SampleDataPack, SceneElement, Theme } from '@cratis/scene.model';\nimport { ComponentRegistry, SceneElementView, coreComponents } from '@cratis/scene.react';\nimport { LayoutConfigProvider, LayoutConfigState } from '../configuration';\nimport { ComponentName } from '../ComponentName';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { ComponentState, foundationSamples } from '../foundation';\nimport { defaultBlueprintName } from '../packageName';\nimport { LayoutThemeProvider, defaultBlueprintThemes } from '../themes';\nimport { composeScreenElement } from './composeScreen';\nimport { galleryComponentCatalog, galleryPreviewProfile } from './previewProfile';\nimport { resolveElementComponentNames } from './resolveElementNames';\nimport { galleryScreen } from './screens';\nimport { TemplatePreviewState } from './TemplatePreviewState';\nimport { applyTemplatePreviewState } from './applyTemplatePreviewState';\n\n/**\n * The registry a preview resolves against when a host does not supply one: `core` plus this blueprint.\n *\n * Merged by hand rather than through `mergePackageRegistries`, because reaching for this blueprint's\n * *bundle* here would be circular - the bundle is assembled from the gallery this file belongs to. Registry\n * keys carry their package name, so merge order cannot cause a collision either way.\n */\nexport const galleryPreviewRegistry: ComponentRegistry = { ...coreComponents, ...defaultBlueprintComponents };\n\nexport interface GalleryScreenPreviewProps {\n    /** The name of the gallery screen to boot. */\n    screenName: string;\n\n    /** Configuration to start from - a story pinning a mode, or a host restoring a session. */\n    initialConfig?: Partial<LayoutConfigState>;\n\n    /** The themes the configurator may switch between. Defaults to the two this blueprint ships. */\n    themes?: Theme[];\n\n    /** The component registry to render against. Defaults to `core` plus this blueprint's own components. */\n    registry?: ComponentRegistry;\n\n    /** The data state to show. Defaults to the seeded, populated records. */\n    state?: TemplatePreviewState;\n\n    /**\n     * The sample-data pack that stands in for the queries the templates bind to: each set's `shape` is a query name and its `rows` that query's result.\n     * Templates carry no rows of their own - they declare where the data comes from (spec SD1) - so a preview of a foundation template needs one.\n     */\n    pack?: SampleDataPack;\n\n    /**\n     * A standard state (spec Part B 1.4) to force on every foundation component that owns the five states: loading, error, no-permission or partial.\n     * This is how a designer inspects each one on a real template - it only sets the `state` property the components already read, so there is no\n     * second code path. `error`, `permissionSubject` and `failedRegions` give the state its message.\n     */\n    forceState?: ForcedComponentState;\n}\n\n/** The standard states a preview can force on a template's components. */\nexport interface ForcedComponentState {\n    state: ComponentState;\n    error?: string;\n    permissionSubject?: string;\n    failedRegions?: string[];\n}\n\n/** Components that are chrome or controls rather than data-showing regions, and so do not own the five states. */\nconst withoutStates = new Set<string>([\n    ComponentName.EmptyState, ComponentName.TrendChip, ComponentName.StatusChip, ComponentName.BulkBar, ComponentName.GlobalSearch, ComponentName.NotificationsButton,\n]);\n\n/** Sets the forced state on every region that owns the five states, leaving chrome and controls as they are. */\nexport function forceComponentState(element: SceneElement, forced: ForcedComponentState): SceneElement {\n    const external = element as Partial<ExternalComponent>;\n    const children = (element as { children?: SceneElement[] }).children;\n    const slots = external.slots ? Object.fromEntries(Object.entries(external.slots).map(([slot, inner]) => [slot, inner.map(child => forceComponentState(child, forced))])) : undefined;\n    const bare = typeof external.componentName === 'string' ? external.componentName.substring(external.componentName.lastIndexOf(':') + 1) : undefined;\n    const owns = bare !== undefined && external.componentName!.includes(defaultBlueprintName) && (bare in foundationSamples) && foundationSamples[bare].stateful && !withoutStates.has(bare);\n\n    return {\n        ...element,\n        ...(owns ? { properties: { ...external.properties, ...forced } } : {}),\n        ...(slots ? { slots } : {}),\n        ...(children ? { children: children.map(child => forceComponentState(child, forced)) } : {}),\n    } as SceneElement;\n}\n\n/**\n * A pack as the query results the templates bind to: one entry for each set, keyed by the set's shape name.\n *\n * The state is a property of the *data*, not of the template: Empty answers every query with no rows; Loading and Error withhold the answer, which is\n * what a query that has not come back or has failed looks like to a component, so each shows its own skeleton or error exactly as it will in an application.\n * The elements themselves are untouched, which is why the same template previews in every state with no per-template code.\n */\nexport const queryResultsOf = (pack: SampleDataPack | undefined, state: TemplatePreviewState = TemplatePreviewState.Populated): Record<string, unknown> | undefined => {\n    if (pack === undefined) return undefined;\n    if (state === TemplatePreviewState.Empty) return Object.fromEntries(pack.sets.map(set => [set.shape, []]));\n    return Object.fromEntries(pack.sets.map(set => [set.shape, set.rows]));\n};\n\n/**\n * Boots one gallery screen through the real engine.\n *\n * Nothing here is a preview-only path: the screen is a real {@link Screen}, its element tree is resolved by\n * the real `resolveComponentName`, and it is rendered by the real `SceneElementView` against the real\n * registry. That is the point of shipping a gallery at all - a mockup proves that someone can draw a\n * dashboard, and this proves the blueprint renders one.\n *\n * Component names belonging to packages the host has not loaded resolve but find no implementation, and\n * come out as `UnresolvedComponent`'s dashed red box naming what is missing. That is the designed outcome:\n * a preview of a blueprint against half a profile should look visibly incomplete rather than quietly\n * wrong.\n */\nexport function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry, state = TemplatePreviewState.Populated, pack, forceState }: GalleryScreenPreviewProps) {\n    const element = useMemo(() => {\n        const screen = galleryScreen(screenName);\n        if (!screen) {\n            throw new Error(`The gallery has no screen named '${screenName}'.`);\n        }\n\n        const resolved = applyTemplatePreviewState(resolveElementComponentNames(composeScreenElement(screen), galleryPreviewProfile, galleryComponentCatalog), state);\n        return forceState ? forceComponentState(resolved, forceState) : resolved;\n    }, [screenName, state, forceState]);\n\n    return (\n        <LayoutConfigProvider initialConfig={initialConfig} storage={null}>\n            <LayoutThemeProvider themes={themes}>\n                <SceneElementView element={element} registry={registry} resolveBinding={() => undefined} queryResults={queryResultsOf(pack, state)} />\n            </LayoutThemeProvider>\n        </LayoutConfigProvider>\n    );\n}\n"],"names":["galleryPreviewRegistry","coreComponents","defaultBlueprintComponents","withoutStates","Set","ComponentName","EmptyState","TrendChip","StatusChip","BulkBar","GlobalSearch","NotificationsButton","forceComponentState","element","forced","external","children","slots","Object","fromEntries","entries","map","slot","inner","child","undefined","bare","componentName","substring","lastIndexOf","owns","includes","defaultBlueprintName","foundationSamples","stateful","has","properties","queryResultsOf","pack","state","TemplatePreviewState","Populated","Empty","sets","set","shape","rows","GalleryScreenPreview","screenName","initialConfig","themes","defaultBlueprintThemes","registry","forceState","useMemo","screen","galleryScreen","Error","resolved","applyTemplatePreviewState","resolveElementComponentNames","composeScreenElement","galleryPreviewProfile","galleryComponentCatalog","_jsx","LayoutConfigProvider","storage","LayoutThemeProvider","SceneElementView","resolveBinding","queryResults"],"mappings":"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"}

package/dist/esm/gallery/applicationChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"applicationChrome.d.ts","sourceRoot":"","sources":["../../../gallery/applicationChrome.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA0CnD,MAAM,WAAW,eAAe;IAE5B,KAAK,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAYD,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAmCrH;AASD,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAE/D"}
+{"version":3,"file":"applicationChrome.d.ts","sourceRoot":"","sources":["../../../gallery/applicationChrome.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA0CtE,MAAM,WAAW,eAAe;IAE5B,KAAK,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAYD,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAwCrH;AASD,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAE/D"}

package/dist/esm/gallery/applicationChrome.js

@@ -1,6 +1,6 @@
+import { BindingSourceKind } from '@cratis/scene.model';
 import { ComponentName } from '../ComponentName.js';
 import { SlotName } from '../layouts/SlotName.js';
-import '@cratis/scene.model';
 import '../layouts/shellComponents.js';
 import '../layouts/appShell.js';
 import '../layouts/fullPage.js';
@@ -62,6 +62,23 @@ import { navigationGroups, entriesInGroup, navigationElement } from './navigatio
                     logo('topbar-logo')
                 ],
                 end: [
+                    // The topbar of Part B 2.1: logo, search, notifications, the environment, and the user. The search and the bell are the foundation
+                    // components, so they work everywhere the shell does; the unread count is a query result, never a value.
+                    externalComponent('topbar-search', ComponentName.GlobalSearch, {
+                        placeholder: 'Search',
+                        label: 'Search the application'
+                    }),
+                    externalComponent('topbar-notifications', ComponentName.NotificationsButton, {
+                        count: {
+                            kind: BindingSourceKind.QueryResult,
+                            query: 'NotificationCount',
+                            path: '0.count'
+                        }
+                    }),
+                    externalComponent('topbar-environment', ComponentName.StatusChip, {
+                        status: 'Production',
+                        tone: 'info'
+                    }),
                     externalComponent('topbar-user', ComponentName.UserMenu, {
                         name: 'Amelia Nyquist',
                         role: 'Owner',

package/dist/esm/gallery/applicationChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"applicationChrome.js","sources":["../../../gallery/applicationChrome.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { SceneElement } from '@cratis/scene.model';\nimport { ComponentName } from '../ComponentName';\nimport { SlotName } from '../layouts';\nimport { defaultBlueprintThemes } from '../themes';\nimport { externalComponent } from './elements';\nimport { entriesInGroup, navigationElement, navigationGroups } from './navigation';\n\n/**\n * The chrome every screen in the application shell shares: the topbar, the sidebar, the menu, the footer\n * and the configurator.\n *\n * It is built once, per screen, rather than repeated in twenty templates. A screen template describes what\n * is *different* about a screen; if it also had to describe the topbar, then adding an item to the menu\n * would mean editing twenty files, and nineteen of them would eventually be missed.\n */\n\n/** The brand mark, shared by the topbar and the sidebar header. */\nfunction logo(id: string): SceneElement {\n    return externalComponent(id, ComponentName.Logo, { label: 'Contoso', initials: 'C', targetScreen: 'Dashboard' });\n}\n\n/** One menu section per navigation group, each holding that group's entries. */\nfunction menuSections(activeScreen: string): SceneElement[] {\n    return navigationGroups.map(group =>\n        externalComponent(\n            `menu-${group.toLowerCase()}`,\n            ComponentName.Menu,\n            { title: group, label: group },\n            { items: entriesInGroup(group).map(entry => navigationElement(entry, activeScreen)) },\n        ),\n    );\n}\n\n/** The configurator, offering the themes this blueprint ships. */\nfunction configPanel(): SceneElement {\n    return externalComponent(ComponentName.ConfigPanel, ComponentName.ConfigPanel, {\n        title: 'Settings',\n        themes: defaultBlueprintThemes.map(theme => ({ name: theme.name, label: theme.name, isDark: theme.isDark ?? false })),\n    });\n}\n\n/** One trail entry: a label, and the screen it goes back to. */\nexport interface BreadcrumbEntry {\n    /** What the entry is called. */\n    label: string;\n\n    /** The screen it navigates back to, or undefined for the current page. */\n    targetScreen?: string;\n}\n\n/**\n * The application shell's slot content for one screen.\n *\n * Only the breadcrumb and which menu entry is marked active differ from screen to screen - everything else\n * is identical, which is the point of chrome.\n *\n * @param activeScreen The screen being rendered, so its menu entry is marked current.\n * @param breadcrumb The trail above the content.\n * @returns Slot content keyed by the {@link SlotName}s the `AppShell` layout declares.\n */\nexport function applicationChrome(activeScreen: string, breadcrumb: BreadcrumbEntry[]): Record<string, SceneElement[]> {\n    return {\n        [SlotName.Topbar]: [\n            externalComponent(\n                'topbar',\n                ComponentName.Topbar,\n                {},\n                {\n                    logo: [logo('topbar-logo')],\n                    end: [\n                        externalComponent('topbar-user', ComponentName.UserMenu, {\n                            name: 'Amelia Nyquist',\n                            role: 'Owner',\n                            initials: 'AN',\n                            items: [\n                                { label: 'Your profile', icon: 'pi pi-user', targetScreen: 'ProfileSettings' },\n                                { label: 'Help', icon: 'pi pi-question-circle', targetScreen: 'Help' },\n                                { label: 'Lock', icon: 'pi pi-lock', targetScreen: 'LockScreen' },\n                            ],\n                        }),\n                    ],\n                },\n            ),\n        ],\n        [SlotName.Sidebar]: [externalComponent('sidebar', ComponentName.Sidebar, { title: 'Contoso' }, { logo: [logo('sidebar-logo')] })],\n        [SlotName.Menu]: menuSections(activeScreen),\n        [SlotName.Breadcrumb]: [\n            externalComponent('breadcrumb', ComponentName.Breadcrumb, {\n                homeTargetScreen: 'Dashboard',\n                items: breadcrumb,\n            }),\n        ],\n        [SlotName.Footer]: [externalComponent('footer', ComponentName.Footer, { text: '© Contoso · Built with Cratis Scene' })],\n        [SlotName.ConfigPanel]: [configPanel()],\n    };\n}\n\n/**\n * The full-page shell's slot content: the configurator and nothing else.\n *\n * A sign-in screen has no navigation to render, but it does have to honor the chosen theme - it is very\n * often the first page anyone sees, and arriving at a light sign-in page before a dark application is a\n * jarring way to start.\n */\nexport function fullPageChrome(): Record<string, SceneElement[]> {\n    return { [SlotName.ConfigPanel]: [configPanel()] };\n}\n"],"names":["logo","id","externalComponent","ComponentName","Logo","label","initials","targetScreen","menuSections","activeScreen","navigationGroups","map","group","toLowerCase","Menu","title","items","entriesInGroup","entry","navigationElement","configPanel","ConfigPanel","themes","defaultBlueprintThemes","theme","name","isDark","applicationChrome","breadcrumb","SlotName","Topbar","end","UserMenu","role","icon","Sidebar","Breadcrumb","homeTargetScreen","Footer","text","fullPageChrome"],"mappings":"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"}
+{"version":3,"file":"applicationChrome.js","sources":["../../../gallery/applicationChrome.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { BindingSourceKind, SceneElement } from '@cratis/scene.model';\nimport { ComponentName } from '../ComponentName';\nimport { SlotName } from '../layouts';\nimport { defaultBlueprintThemes } from '../themes';\nimport { externalComponent } from './elements';\nimport { entriesInGroup, navigationElement, navigationGroups } from './navigation';\n\n/**\n * The chrome every screen in the application shell shares: the topbar, the sidebar, the menu, the footer\n * and the configurator.\n *\n * It is built once, per screen, rather than repeated in twenty templates. A screen template describes what\n * is *different* about a screen; if it also had to describe the topbar, then adding an item to the menu\n * would mean editing twenty files, and nineteen of them would eventually be missed.\n */\n\n/** The brand mark, shared by the topbar and the sidebar header. */\nfunction logo(id: string): SceneElement {\n    return externalComponent(id, ComponentName.Logo, { label: 'Contoso', initials: 'C', targetScreen: 'Dashboard' });\n}\n\n/** One menu section per navigation group, each holding that group's entries. */\nfunction menuSections(activeScreen: string): SceneElement[] {\n    return navigationGroups.map(group =>\n        externalComponent(\n            `menu-${group.toLowerCase()}`,\n            ComponentName.Menu,\n            { title: group, label: group },\n            { items: entriesInGroup(group).map(entry => navigationElement(entry, activeScreen)) },\n        ),\n    );\n}\n\n/** The configurator, offering the themes this blueprint ships. */\nfunction configPanel(): SceneElement {\n    return externalComponent(ComponentName.ConfigPanel, ComponentName.ConfigPanel, {\n        title: 'Settings',\n        themes: defaultBlueprintThemes.map(theme => ({ name: theme.name, label: theme.name, isDark: theme.isDark ?? false })),\n    });\n}\n\n/** One trail entry: a label, and the screen it goes back to. */\nexport interface BreadcrumbEntry {\n    /** What the entry is called. */\n    label: string;\n\n    /** The screen it navigates back to, or undefined for the current page. */\n    targetScreen?: string;\n}\n\n/**\n * The application shell's slot content for one screen.\n *\n * Only the breadcrumb and which menu entry is marked active differ from screen to screen - everything else\n * is identical, which is the point of chrome.\n *\n * @param activeScreen The screen being rendered, so its menu entry is marked current.\n * @param breadcrumb The trail above the content.\n * @returns Slot content keyed by the {@link SlotName}s the `AppShell` layout declares.\n */\nexport function applicationChrome(activeScreen: string, breadcrumb: BreadcrumbEntry[]): Record<string, SceneElement[]> {\n    return {\n        [SlotName.Topbar]: [\n            externalComponent(\n                'topbar',\n                ComponentName.Topbar,\n                {},\n                {\n                    logo: [logo('topbar-logo')],\n                    end: [\n                        // The topbar of Part B 2.1: logo, search, notifications, the environment, and the user. The search and the bell are the foundation\n                        // components, so they work everywhere the shell does; the unread count is a query result, never a value.\n                        externalComponent('topbar-search', ComponentName.GlobalSearch, { placeholder: 'Search', label: 'Search the application' }),\n                        externalComponent('topbar-notifications', ComponentName.NotificationsButton, { count: { kind: BindingSourceKind.QueryResult, query: 'NotificationCount', path: '0.count' } }),\n                        externalComponent('topbar-environment', ComponentName.StatusChip, { status: 'Production', tone: 'info' }),\n                        externalComponent('topbar-user', ComponentName.UserMenu, {\n                            name: 'Amelia Nyquist',\n                            role: 'Owner',\n                            initials: 'AN',\n                            items: [\n                                { label: 'Your profile', icon: 'pi pi-user', targetScreen: 'ProfileSettings' },\n                                { label: 'Help', icon: 'pi pi-question-circle', targetScreen: 'Help' },\n                                { label: 'Lock', icon: 'pi pi-lock', targetScreen: 'LockScreen' },\n                            ],\n                        }),\n                    ],\n                },\n            ),\n        ],\n        [SlotName.Sidebar]: [externalComponent('sidebar', ComponentName.Sidebar, { title: 'Contoso' }, { logo: [logo('sidebar-logo')] })],\n        [SlotName.Menu]: menuSections(activeScreen),\n        [SlotName.Breadcrumb]: [\n            externalComponent('breadcrumb', ComponentName.Breadcrumb, {\n                homeTargetScreen: 'Dashboard',\n                items: breadcrumb,\n            }),\n        ],\n        [SlotName.Footer]: [externalComponent('footer', ComponentName.Footer, { text: '© Contoso · Built with Cratis Scene' })],\n        [SlotName.ConfigPanel]: [configPanel()],\n    };\n}\n\n/**\n * The full-page shell's slot content: the configurator and nothing else.\n *\n * A sign-in screen has no navigation to render, but it does have to honor the chosen theme - it is very\n * often the first page anyone sees, and arriving at a light sign-in page before a dark application is a\n * jarring way to start.\n */\nexport function fullPageChrome(): Record<string, SceneElement[]> {\n    return { [SlotName.ConfigPanel]: [configPanel()] };\n}\n"],"names":["logo","id","externalComponent","ComponentName","Logo","label","initials","targetScreen","menuSections","activeScreen","navigationGroups","map","group","toLowerCase","Menu","title","items","entriesInGroup","entry","navigationElement","configPanel","ConfigPanel","themes","defaultBlueprintThemes","theme","name","isDark","applicationChrome","breadcrumb","SlotName","Topbar","end","GlobalSearch","placeholder","NotificationsButton","count","kind","BindingSourceKind","QueryResult","query","path","StatusChip","status","tone","UserMenu","role","icon","Sidebar","Breadcrumb","homeTargetScreen","Footer","text","fullPageChrome"],"mappings":"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"}

package/dist/esm/gallery/composeScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composeScreen.d.ts","sourceRoot":"","sources":["../../../gallery/composeScreen.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAgBtG,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAqBhH;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,CAE3E;AA4BD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,CAOtE"}
+{"version":3,"file":"composeScreen.d.ts","sourceRoot":"","sources":["../../../gallery/composeScreen.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAgBtG,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAqBhH;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,CAE3E;AA8BD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,CAOtE"}

package/dist/esm/gallery/composeScreen.js

@@ -59,13 +59,15 @@ function placeInside(outer, inner) {
     if (!inner.fitsSlot) {
         return outer;
     }
-    const innerContent = inner.slots.flatMap((slot)=>inner.content?.[slot.name] ?? []);
+    // A container-qualified name (`WorkspaceScreen.moduleContent`) says which container; the slot's own name is what the container's content is keyed by.
+    const slot = inner.fitsSlot.substring(inner.fitsSlot.lastIndexOf('.') + 1);
+    const innerContent = inner.slots.flatMap((innerSlot)=>inner.content?.[innerSlot.name] ?? []);
     return {
         ...outer,
         content: {
             ...outer.content,
-            [inner.fitsSlot]: [
-                ...outer.content?.[inner.fitsSlot] ?? [],
+            [slot]: [
+                ...outer.content?.[slot] ?? [],
                 ...innerContent
             ]
         }