@cratis/scene.blueprint.default 4.39.0 → 4.41.0

package/dist/cjs/foundation/templates/recordPageTemplate.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The record page: a header, the key facts, then tabs (overview, related, files, history) with the record's main content, its related records and its
+ * activity, and an aside. The tabs are configurable by changing one property.
+ */ const recordPageTemplate = {
+    name: 'RecordPage',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'summary'
+        },
+        {
+            name: 'tabs'
+        },
+        {
+            name: 'main'
+        },
+        {
+            name: 'related'
+        },
+        {
+            name: 'activity'
+        },
+        {
+            name: 'aside'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.slotLeaf('summary'),
+            flowBuilders.grid([
+                flowBuilders.column([
+                    flowBuilders.slotLeaf('tabs'),
+                    flowBuilders.slotLeaf('main'),
+                    flowBuilders.slotLeaf('related'),
+                    flowBuilders.slotLeaf('activity')
+                ], 16, {
+                    span: 2
+                }),
+                flowBuilders.slotLeaf('aside')
+            ], 3, 16)
+        ], 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('summary'),
+                    flowBuilders.slotLeaf('tabs'),
+                    flowBuilders.slotLeaf('main'),
+                    flowBuilders.slotLeaf('related'),
+                    flowBuilders.slotLeaf('activity'),
+                    flowBuilders.slotLeaf('aside')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('record-header', 'pageHeader', {
+                title: templateParts.fromQuery('RecordValues', '0.name'),
+                subtitle: 'Account'
+            })
+        ],
+        summary: [
+            templateParts.component('record-value', 'statCard', {
+                label: 'Lifetime value',
+                value: templateParts.fromQuery('Kpis', '0.value'),
+                format: 'currency',
+                currency: 'USD'
+            }),
+            templateParts.component('record-status', 'statusChip', {
+                status: templateParts.fromQuery('Deals', '0.status'),
+                tone: 'info'
+            }),
+            templateParts.component('record-people', 'avatarStack', {
+                people: templateParts.fromQuery('People')
+            })
+        ],
+        tabs: [
+            templateParts.component('record-tabs', 'tabSet', {
+                tabs: templateParts.fromQuery('RecordTabs'),
+                urlKey: 'tab',
+                label: 'Record sections'
+            })
+        ],
+        main: [
+            templateParts.component('record-form', 'formScreenBody', {
+                mode: 'readOnly',
+                sections: templateParts.fromQuery('RecordSections'),
+                values: templateParts.fromQuery('RecordValues', '0')
+            })
+        ],
+        related: [
+            templateParts.component('record-related', 'dataList', {
+                label: 'Related deals',
+                rows: templateParts.fromQuery('Deals'),
+                columns: templateParts.fromQuery('DealColumns'),
+                titleField: 'name',
+                pageSize: 5
+            })
+        ],
+        activity: [
+            templateParts.component('record-activity', 'activityFeed', {
+                label: 'History',
+                entries: templateParts.fromQuery('Activity')
+            })
+        ],
+        aside: [
+            templateParts.component('record-checklist', 'checklistSection', {
+                sections: templateParts.fromQuery('Checklist')
+            })
+        ]
+    },
+    displayName: 'Record page',
+    description: 'One record: its key facts, tabbed sections, related records and history.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Detail',
+        category: 'Foundation / Detail',
+        thumbnail: templateParts.thumbnailOf('RecordPage')
+    }
+};
+
+exports.recordPageTemplate = recordPageTemplate;
+//# sourceMappingURL=recordPageTemplate.js.map

package/dist/cjs/foundation/templates/recordPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recordPageTemplate.js","sources":["../../../../foundation/templates/recordPageTemplate.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 * The record page: a header, the key facts, then tabs (overview, related, files, history) with the record's main content, its related records and its\n * activity, and an aside. The tabs are configurable by changing one property.\n */\nexport const recordPageTemplate: ScreenTemplate = {\n    name: 'RecordPage',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'summary' }, { name: 'tabs' }, { name: 'main' }, { name: 'related' }, { name: 'activity' }, { name: 'aside' }],\n    arrangement: {\n        root: column([slotLeaf('header'), slotLeaf('summary'), grid([column([slotLeaf('tabs'), slotLeaf('main'), slotLeaf('related'), slotLeaf('activity')], 16, { span: 2 }), slotLeaf('aside')], 3, 16)], 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('summary'), slotLeaf('tabs'), slotLeaf('main'), slotLeaf('related'), slotLeaf('activity'), slotLeaf('aside')], 16) }],\n    },\n    content: {\n        header: [component('record-header', 'pageHeader', { title: fromQuery('RecordValues', '0.name'), subtitle: 'Account' })],\n        summary: [\n            component('record-value', 'statCard', { label: 'Lifetime value', value: fromQuery('Kpis', '0.value'), format: 'currency', currency: 'USD' }),\n            component('record-status', 'statusChip', { status: fromQuery('Deals', '0.status'), tone: 'info' }),\n            component('record-people', 'avatarStack', { people: fromQuery('People') }),\n        ],\n        tabs: [component('record-tabs', 'tabSet', { tabs: fromQuery('RecordTabs'), urlKey: 'tab', label: 'Record sections' })],\n        main: [component('record-form', 'formScreenBody', { mode: 'readOnly', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0') })],\n        related: [component('record-related', 'dataList', { label: 'Related deals', rows: fromQuery('Deals'), columns: fromQuery('DealColumns'), titleField: 'name', pageSize: 5 })],\n        activity: [component('record-activity', 'activityFeed', { label: 'History', entries: fromQuery('Activity') })],\n        aside: [component('record-checklist', 'checklistSection', { sections: fromQuery('Checklist') })],\n    },\n    displayName: 'Record page',\n    description: 'One record: its key facts, tabbed sections, related records and history.',\n    metadata: { ...foundationTemplateProvenance, type: 'Detail', category: 'Foundation / Detail', thumbnail: thumbnailOf('RecordPage') },\n};\n"],"names":["recordPageTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","grid","span","overrides","width","WidthSizeClass","Compact","content","header","component","title","fromQuery","subtitle","summary","label","value","format","currency","status","tone","people","tabs","urlKey","main","mode","sections","values","related","rows","columns","titleField","pageSize","activity","entries","aside","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":"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"}

package/dist/cjs/foundation/templates/templateParts.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var elements = require('../../gallery/elements.js');
+var templateProvenance = require('../../templateProvenance.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The provenance every foundation template carries. The foundation components draw themselves with no component library, so unlike the earlier
+ * gallery templates these require no PrimeReact or Cratis.Components: a host with only this blueprint renders them.
+ */ const foundationTemplateProvenance = {
+    compatibility: {
+        scene: templateProvenance.defaultBlueprintTemplateProvenance.compatibility.scene
+    },
+    attribution: {
+        author: 'Cratis',
+        url: 'https://github.com/Cratis/Scene/tree/main/Source/JavaScript/blueprint.default'
+    },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE'
+};
+/** The package-relative thumbnail path of a foundation template. */ const thumbnailOf = (templateName)=>`thumbnails/${templateName}.svg`;
+/**
+ * A property taken from a query result - never a value. A template declares *where* its data comes from and the sample-data pack, or the real
+ * query, supplies the rows (spec SD1); `path` reaches into the result (`0.value` is the first row's `value`, an empty path is the whole result).
+ */ const fromQuery = (query, path = '')=>({
+        kind: scene_model.BindingSourceKind.QueryResult,
+        query,
+        path
+    });
+/** A component of this blueprint, by its bare name, with its properties and slot content. */ const component = (id, componentName, properties = {}, slots = {})=>elements.externalComponent(id, componentName, properties, slots);
+
+exports.component = component;
+exports.foundationTemplateProvenance = foundationTemplateProvenance;
+exports.fromQuery = fromQuery;
+exports.thumbnailOf = thumbnailOf;
+//# sourceMappingURL=templateParts.js.map

package/dist/cjs/foundation/templates/templateParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateParts.js","sources":["../../../../foundation/templates/templateParts.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 { BindingExpression, BindingSourceKind, ExternalComponent, SceneElement, TemplateMetadata } from '@cratis/scene.model';\nimport { externalComponent } from '../../gallery/elements';\nimport { defaultBlueprintTemplateProvenance } from '../../templateProvenance';\n\n/**\n * The provenance every foundation template carries. The foundation components draw themselves with no component library, so unlike the earlier\n * gallery templates these require no PrimeReact or Cratis.Components: a host with only this blueprint renders them.\n */\nexport const foundationTemplateProvenance: Pick<TemplateMetadata, 'compatibility' | 'attribution' | 'license' | 'licenseUrl'> = {\n    compatibility: { scene: defaultBlueprintTemplateProvenance.compatibility!.scene },\n    attribution: { author: 'Cratis', url: 'https://github.com/Cratis/Scene/tree/main/Source/JavaScript/blueprint.default' },\n    license: 'MIT',\n    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',\n};\n\n/** The package-relative thumbnail path of a foundation template. */\nexport const thumbnailOf = (templateName: string): string => `thumbnails/${templateName}.svg`;\n\n/**\n * A property taken from a query result - never a value. A template declares *where* its data comes from and the sample-data pack, or the real\n * query, supplies the rows (spec SD1); `path` reaches into the result (`0.value` is the first row's `value`, an empty path is the whole result).\n */\nexport const fromQuery = (query: string, path = ''): BindingExpression => ({ kind: BindingSourceKind.QueryResult, query, path });\n\n/** A component of this blueprint, by its bare name, with its properties and slot content. */\nexport const component = (id: string, componentName: string, properties: Record<string, unknown> = {}, slots: Record<string, SceneElement[]> = {}): ExternalComponent =>\n    externalComponent(id, componentName, properties, slots);\n"],"names":["foundationTemplateProvenance","compatibility","scene","defaultBlueprintTemplateProvenance","attribution","author","url","license","licenseUrl","thumbnailOf","templateName","fromQuery","query","path","kind","BindingSourceKind","QueryResult","component","id","componentName","properties","slots","externalComponent"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,4BAAAA,GAAmH;IAC5HC,aAAAA,EAAe;QAAEC,KAAAA,EAAOC,qDAAAA,CAAmCF,aAAa,CAAEC;AAAM,KAAA;IAChFE,WAAAA,EAAa;QAAEC,MAAAA,EAAQ,QAAA;QAAUC,GAAAA,EAAK;AAAgF,KAAA;IACtHC,OAAAA,EAAS,KAAA;IACTC,UAAAA,EAAY;AAChB;AAEA,qEACO,MAAMC,WAAAA,GAAc,CAACC,YAAAA,GAAiC,CAAC,WAAW,EAAEA,YAAAA,CAAa,IAAI;AAE5F;;;UAIaC,SAAAA,GAAY,CAACC,OAAeC,IAAAA,GAAO,EAAE,IAAyB;AAAEC,QAAAA,IAAAA,EAAMC,8BAAkBC,WAAW;AAAEJ,QAAAA,KAAAA;AAAOC,QAAAA;AAAK,KAAA;AAE9H,8FACO,MAAMI,YAAY,CAACC,EAAAA,EAAYC,eAAuBC,UAAAA,GAAsC,EAAE,EAAEC,KAAAA,GAAwC,EAAE,GAC7IC,2BAAkBJ,EAAAA,EAAIC,aAAAA,EAAeC,YAAYC,KAAAA;;;;;"}

package/dist/cjs/foundation/templates/wizardScreenTemplate.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The wizard: linear steps with a progress list, Back and Next, and a save-draft. The last step is the review. Where the person has got to survives a refresh,
+ * and a refresh can never land past a step that was not done. The content of each step is the slot named by its id.
+ */ const wizardScreenTemplate = {
+    name: 'WizardScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'progress'
+        },
+        {
+            name: 'step'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.slotLeaf('progress'),
+            flowBuilders.slotLeaf('step'),
+            flowBuilders.slotLeaf('actions')
+        ], 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('progress'),
+                    flowBuilders.slotLeaf('step'),
+                    flowBuilders.slotLeaf('actions')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('wizard-header', 'pageHeader', {
+                title: 'New account',
+                subtitle: 'Three short steps'
+            })
+        ],
+        progress: [
+            templateParts.component('wizard-progress', 'wizardProgress', {
+                steps: templateParts.fromQuery('WizardSteps'),
+                urlKey: 'step'
+            }, {
+                details: [
+                    templateParts.component('wizard-details', 'formScreenBody', {
+                        mode: 'create',
+                        sections: templateParts.fromQuery('RecordSections'),
+                        values: templateParts.fromQuery('RecordValues', '0')
+                    })
+                ],
+                people: [
+                    templateParts.component('wizard-people', 'avatarStack', {
+                        people: templateParts.fromQuery('People')
+                    })
+                ],
+                review: [
+                    templateParts.component('wizard-review', 'formScreenBody', {
+                        mode: 'readOnly',
+                        sections: templateParts.fromQuery('RecordSections'),
+                        values: templateParts.fromQuery('RecordValues', '0')
+                    })
+                ]
+            })
+        ],
+        step: [],
+        actions: []
+    },
+    displayName: 'Wizard',
+    description: 'Linear steps with progress, back and next, a saved draft and a review step.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Wizard',
+        category: 'Foundation / Wizard',
+        thumbnail: templateParts.thumbnailOf('WizardScreen')
+    }
+};
+
+exports.wizardScreenTemplate = wizardScreenTemplate;
+//# sourceMappingURL=wizardScreenTemplate.js.map

package/dist/cjs/foundation/templates/wizardScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardScreenTemplate.js","sources":["../../../../foundation/templates/wizardScreenTemplate.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 * The wizard: linear steps with a progress list, Back and Next, and a save-draft. The last step is the review. Where the person has got to survives a refresh,\n * and a refresh can never land past a step that was not done. The content of each step is the slot named by its id.\n */\nexport const wizardScreenTemplate: ScreenTemplate = {\n    name: 'WizardScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'progress' }, { name: 'step' }, { name: 'actions' }],\n    arrangement: {\n        root: column([slotLeaf('header'), slotLeaf('progress'), slotLeaf('step'), slotLeaf('actions')], 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('progress'), slotLeaf('step'), slotLeaf('actions')], 16) }],\n    },\n    content: {\n        header: [component('wizard-header', 'pageHeader', { title: 'New account', subtitle: 'Three short steps' })],\n        progress: [component('wizard-progress', 'wizardProgress', { steps: fromQuery('WizardSteps'), urlKey: 'step' }, {\n            details: [component('wizard-details', 'formScreenBody', { mode: 'create', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0') })],\n            people: [component('wizard-people', 'avatarStack', { people: fromQuery('People') })],\n            review: [component('wizard-review', 'formScreenBody', { mode: 'readOnly', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0') })],\n        })],\n        step: [],\n        actions: [],\n    },\n    displayName: 'Wizard',\n    description: 'Linear steps with progress, back and next, a saved draft and a review step.',\n    metadata: { ...foundationTemplateProvenance, type: 'Wizard', category: 'Foundation / Wizard', thumbnail: thumbnailOf('WizardScreen') },\n};\n"],"names":["wizardScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","progress","steps","fromQuery","urlKey","details","mode","sections","values","people","review","step","actions","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,oBAAAA,GAAuC;IAChDC,IAAAA,EAAM,cAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAW,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAO,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAU;AAAE,KAAA;IACxFG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,mBAAAA,CAAO;YAACC,qBAAAA,CAAS,QAAA,CAAA;YAAWA,qBAAAA,CAAS,UAAA,CAAA;YAAaA,qBAAAA,CAAS,MAAA,CAAA;YAASA,qBAAAA,CAAS,SAAA;SAAW,EAAE,EAAA,CAAA;QAChGC,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,2BAAeC,OAAO;AAAEN,gBAAAA,IAAAA,EAAMC,mBAAAA,CAAO;oBAACC,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,UAAA,CAAA;oBAAaA,qBAAAA,CAAS,MAAA,CAAA;oBAASA,qBAAAA,CAAS,SAAA;iBAAW,EAAE,EAAA;AAAI;AAAE;AACvJ,KAAA;IACAK,OAAAA,EAAS;QACLC,MAAAA,EAAQ;AAACC,YAAAA,uBAAAA,CAAU,iBAAiB,YAAA,EAAc;gBAAEC,KAAAA,EAAO,aAAA;gBAAeC,QAAAA,EAAU;AAAoB,aAAA;AAAG,SAAA;QAC3GC,QAAAA,EAAU;AAACH,YAAAA,uBAAAA,CAAU,mBAAmB,gBAAA,EAAkB;AAAEI,gBAAAA,KAAAA,EAAOC,uBAAAA,CAAU,aAAA,CAAA;gBAAgBC,MAAAA,EAAQ;aAAO,EAAG;gBAC3GC,OAAAA,EAAS;AAACP,oBAAAA,uBAAAA,CAAU,kBAAkB,gBAAA,EAAkB;wBAAEQ,IAAAA,EAAM,QAAA;AAAUC,wBAAAA,QAAAA,EAAUJ,uBAAAA,CAAU,gBAAA,CAAA;AAAmBK,wBAAAA,MAAAA,EAAQL,wBAAU,cAAA,EAAgB,GAAA;AAAK,qBAAA;AAAG,iBAAA;gBAC3JM,MAAAA,EAAQ;AAACX,oBAAAA,uBAAAA,CAAU,iBAAiB,aAAA,EAAe;AAAEW,wBAAAA,MAAAA,EAAQN,uBAAAA,CAAU,QAAA;AAAU,qBAAA;AAAG,iBAAA;gBACpFO,MAAAA,EAAQ;AAACZ,oBAAAA,uBAAAA,CAAU,iBAAiB,gBAAA,EAAkB;wBAAEQ,IAAAA,EAAM,UAAA;AAAYC,wBAAAA,QAAAA,EAAUJ,uBAAAA,CAAU,gBAAA,CAAA;AAAmBK,wBAAAA,MAAAA,EAAQL,wBAAU,cAAA,EAAgB,GAAA;AAAK,qBAAA;AAAG;AAC/J,aAAA;AAAG,SAAA;AACHQ,QAAAA,IAAAA,EAAM,EAAE;AACRC,QAAAA,OAAAA,EAAS;AACb,KAAA;IACAC,WAAAA,EAAa,QAAA;IACbC,WAAAA,EAAa,6EAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,0CAA4B;QAAEC,IAAAA,EAAM,QAAA;QAAUC,QAAAA,EAAU,qBAAA;AAAuBC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,cAAA;AAAgB;AACzI;;"}

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./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: flowBuilders.grid([
+            flowBuilders.slotLeaf('moduleNav'),
+            flowBuilders.slotLeaf('moduleContent', {
+                span: 3
+            })
+        ], 4, 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('moduleNav'),
+                    flowBuilders.slotLeaf('moduleContent')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        moduleNav: [
+            templateParts.component('workspace-sections', 'subNavigation', {
+                items: templateParts.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: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Workspace',
+        category: 'Foundation / Workspace',
+        thumbnail: templateParts.thumbnailOf('WorkspaceScreen')
+    }
+};
+
+exports.workspaceScreenTemplate = workspaceScreenTemplate;
+//# sourceMappingURL=workspaceScreenTemplate.js.map

package/dist/cjs/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,iBAAAA,CAAK;YAACC,qBAAAA,CAAS,WAAA,CAAA;AAAcA,YAAAA,qBAAAA,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,2BAAeC,OAAO;AAAEP,gBAAAA,IAAAA,EAAMQ,mBAAAA,CAAO;oBAACN,qBAAAA,CAAS,WAAA,CAAA;oBAAcA,qBAAAA,CAAS,eAAA;iBAAiB,EAAE,EAAA;AAAI;AAAE;AACxH,KAAA;IACAO,OAAAA,EAAS;QACLC,SAAAA,EAAW;AAACC,YAAAA,uBAAAA,CAAU,sBAAsB,eAAA,EAAiB;AAAEC,gBAAAA,KAAAA,EAAOC,uBAAAA,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,0CAA4B;QAAEC,IAAAA,EAAM,WAAA;QAAaC,QAAAA,EAAU,wBAAA;AAA0BC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,iBAAA;AAAmB;AAClJ;;"}

package/dist/cjs/foundation/urlState.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var react = require('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] = react.useState(()=>key === undefined ? fallback : readUrlParameter(key) ?? fallback);
+    react.useEffect(()=>{
+        if (key === undefined) return;
+        const restore = ()=>setValue(readUrlParameter(key) ?? fallback);
+        window.addEventListener('popstate', restore);
+        return ()=>window.removeEventListener('popstate', restore);
+    }, [
+        key,
+        fallback
+    ]);
+    const update = react.useCallback((next)=>{
+        setValue(next);
+        if (key !== undefined) writeUrlParameter(key, next);
+    }, [
+        key
+    ]);
+    return [
+        value,
+        update
+    ];
+}
+
+exports.readUrlParameter = readUrlParameter;
+exports.useUrlState = useUrlState;
+exports.writeUrlParameter = writeUrlParameter;
+//# sourceMappingURL=urlState.js.map

package/dist/cjs/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,cAAAA,CAA6B,IAAOH,GAAAA,KAAQnB,SAAAA,GAAYoB,QAAAA,GAAWvB,gBAAAA,CAAiBsB,GAAAA,CAAAA,IAAQC,QAAAA,CAAAA;IAEtHG,eAAAA,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,kBAAY,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/cjs/foundation/useCompactWidth.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var react = require('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] = react.useState(()=>typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(compactQuery).matches);
+    react.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;
+}
+
+exports.compactQuery = compactQuery;
+exports.useCompactWidth = useCompactWidth;
+//# sourceMappingURL=useCompactWidth.js.map

package/dist/cjs/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,cAAAA,CAAS,IAAM,OAAOC,MAAAA,KAAW,WAAA,IAAe,OAAOA,MAAAA,CAAOC,UAAU,KAAK,UAAA,IAAcD,OAAOC,UAAU,CAACN,cAAcO,OAAO,CAAA;IAEhKC,eAAAA,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/cjs/foundation/wizardModel.js

@@ -0,0 +1,50 @@
+'use strict';
+
+// 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];
+
+exports.StepStatus = StepStatus;
+exports.canOpen = canOpen;
+exports.neighbour = neighbour;
+exports.reachableStep = reachableStep;
+exports.readWizardSteps = readWizardSteps;
+exports.statusOf = statusOf;
+//# sourceMappingURL=wizardModel.js.map

package/dist/cjs/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;;;;;;;"}