@cratis/scene.blueprint.default 0.1.0

package/dist/cjs/gallery/composeScreen.js

@@ -0,0 +1,99 @@
+'use strict';
+
+require('@cratis/scene.model');
+var shellComponents = require('../layouts/shellComponents.js');
+require('../layouts/appShell.js');
+require('../layouts/fullPage.js');
+var elements = require('./elements.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Turns a {@link ScreenTemplate}'s content into slot content on the {@link Layout} that contains it.
+ *
+ * The rule has two halves, and both matter. Content filed under a slot the *layout* also declares stays
+ * under that name - which is how a sign-in template's branding half reaches the full-page layout's `aside`
+ * region rather than being buried inside the form column. Everything else flows into the slot the
+ * template's `fitsSlot` names, because that is what `fitsSlot` means: this template occupies that region.
+ *
+ * @param template The template to place.
+ * @param layout The layout it is placed into.
+ * @returns Slot content keyed by the layout's own slot names.
+ */ function templateContentInLayout(template, layout) {
+    const layoutSlots = new Set(layout.slots.map((slot)=>slot.name));
+    const placed = {};
+    const ownSlotOrder = template.slots.map((slot)=>slot.name);
+    const content = template.content ?? {};
+    for (const slotName of ownSlotOrder){
+        const elements = content[slotName];
+        if (!elements || elements.length === 0) {
+            continue;
+        }
+        const target = layoutSlots.has(slotName) ? slotName : template.fitsSlot;
+        if (!target) {
+            continue;
+        }
+        placed[target] = [
+            ...placed[target] ?? [],
+            ...elements
+        ];
+    }
+    return placed;
+}
+/**
+ * Folds a containment chain of screen templates into the outermost one.
+ *
+ * This is `fitsSlot` doing its job, applied repeatedly. A slice's template fits a slot on the feature's
+ * template, which fits a slot on the module's, which fits a slot on the application layout - so the way to
+ * place the slice is to place it in the feature, place *that* result in the module, and hand the module to
+ * the layout. Folding from the inside out means the rule is written once and the chain can be any depth.
+ *
+ * The alternative - filing a nested template's content under its own `fitsSlot` at the top level - looks
+ * right and is not: the layout has no `body` slot, so the content lands in a region nothing renders and
+ * the screen comes up empty with nothing to explain it.
+ *
+ * @param chain The templates from outermost to innermost. A chain of one is returned unchanged.
+ * @returns A template with the same slots and `fitsSlot` as the outermost, carrying the whole chain's content.
+ */ function nestScreenTemplates(chain) {
+    return chain.reduceRight((inner, outer)=>inner === outer ? outer : placeInside(outer, inner));
+}
+function placeInside(outer, inner) {
+    if (!inner.fitsSlot) {
+        return outer;
+    }
+    const innerContent = inner.slots.flatMap((slot)=>inner.content?.[slot.name] ?? []);
+    return {
+        ...outer,
+        content: {
+            ...outer.content,
+            [inner.fitsSlot]: [
+                ...outer.content?.[inner.fitsSlot] ?? [],
+                ...innerContent
+            ]
+        }
+    };
+}
+/**
+ * Builds the element tree that renders a {@link Screen}.
+ *
+ * The screen's slot content becomes the shell component's slots one-for-one, which is the whole trick: a
+ * layout's slots and a shell component's slots are the same vocabulary, so nothing has to translate
+ * between them and a slot filled under a name the shell does not read is a spec failure rather than a
+ * silently missing region.
+ *
+ * @param screen The screen to render.
+ * @returns The shell element, ready for `SceneElementView`.
+ */ function composeScreenElement(screen) {
+    const shell = shellComponents.shellComponentForLayout(screen.layout);
+    if (!shell) {
+        throw new Error(`Screen '${screen.name}' names the layout '${screen.layout}', which this blueprint does not provide.`);
+    }
+    return elements.externalComponent(`screen-${screen.name}`, shell, {
+        screenName: screen.name
+    }, screen.slotContent);
+}
+
+exports.composeScreenElement = composeScreenElement;
+exports.nestScreenTemplates = nestScreenTemplates;
+exports.templateContentInLayout = templateContentInLayout;
+//# sourceMappingURL=composeScreen.js.map

package/dist/cjs/gallery/composeScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeScreen.js","sources":["../../../gallery/composeScreen.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 { ExternalComponent, Layout, SceneElement, Screen, ScreenTemplate } from '@cratis/scene.model';\nimport { shellComponentForLayout } from '../layouts';\nimport { externalComponent } from './elements';\n\n/**\n * Turns a {@link ScreenTemplate}'s content into slot content on the {@link Layout} that contains it.\n *\n * The rule has two halves, and both matter. Content filed under a slot the *layout* also declares stays\n * under that name - which is how a sign-in template's branding half reaches the full-page layout's `aside`\n * region rather than being buried inside the form column. Everything else flows into the slot the\n * template's `fitsSlot` names, because that is what `fitsSlot` means: this template occupies that region.\n *\n * @param template The template to place.\n * @param layout The layout it is placed into.\n * @returns Slot content keyed by the layout's own slot names.\n */\nexport function templateContentInLayout(template: ScreenTemplate, layout: Layout): Record<string, SceneElement[]> {\n    const layoutSlots = new Set(layout.slots.map(slot => slot.name));\n    const placed: Record<string, SceneElement[]> = {};\n    const ownSlotOrder = template.slots.map(slot => slot.name);\n    const content = template.content ?? {};\n\n    for (const slotName of ownSlotOrder) {\n        const elements = content[slotName];\n        if (!elements || elements.length === 0) {\n            continue;\n        }\n\n        const target = layoutSlots.has(slotName) ? slotName : template.fitsSlot;\n        if (!target) {\n            continue;\n        }\n\n        placed[target] = [...(placed[target] ?? []), ...elements];\n    }\n\n    return placed;\n}\n\n/**\n * Folds a containment chain of screen templates into the outermost one.\n *\n * This is `fitsSlot` doing its job, applied repeatedly. A slice's template fits a slot on the feature's\n * template, which fits a slot on the module's, which fits a slot on the application layout - so the way to\n * place the slice is to place it in the feature, place *that* result in the module, and hand the module to\n * the layout. Folding from the inside out means the rule is written once and the chain can be any depth.\n *\n * The alternative - filing a nested template's content under its own `fitsSlot` at the top level - looks\n * right and is not: the layout has no `body` slot, so the content lands in a region nothing renders and\n * the screen comes up empty with nothing to explain it.\n *\n * @param chain The templates from outermost to innermost. A chain of one is returned unchanged.\n * @returns A template with the same slots and `fitsSlot` as the outermost, carrying the whole chain's content.\n */\nexport function nestScreenTemplates(chain: ScreenTemplate[]): ScreenTemplate {\n    return chain.reduceRight((inner, outer) => (inner === outer ? outer : placeInside(outer, inner)));\n}\n\nfunction placeInside(outer: ScreenTemplate, inner: ScreenTemplate): ScreenTemplate {\n    if (!inner.fitsSlot) {\n        return outer;\n    }\n\n    const innerContent = inner.slots.flatMap(slot => inner.content?.[slot.name] ?? []);\n    return {\n        ...outer,\n        content: {\n            ...outer.content,\n            [inner.fitsSlot]: [...(outer.content?.[inner.fitsSlot] ?? []), ...innerContent],\n        },\n    };\n}\n\n/**\n * Builds the element tree that renders a {@link Screen}.\n *\n * The screen's slot content becomes the shell component's slots one-for-one, which is the whole trick: a\n * layout's slots and a shell component's slots are the same vocabulary, so nothing has to translate\n * between them and a slot filled under a name the shell does not read is a spec failure rather than a\n * silently missing region.\n *\n * @param screen The screen to render.\n * @returns The shell element, ready for `SceneElementView`.\n */\nexport function composeScreenElement(screen: Screen): ExternalComponent {\n    const shell = shellComponentForLayout(screen.layout);\n    if (!shell) {\n        throw new Error(`Screen '${screen.name}' names the layout '${screen.layout}', which this blueprint does not provide.`);\n    }\n\n    return externalComponent(`screen-${screen.name}`, shell, { screenName: screen.name }, screen.slotContent);\n}\n"],"names":["templateContentInLayout","template","layout","layoutSlots","Set","slots","map","slot","name","placed","ownSlotOrder","content","slotName","elements","length","target","has","fitsSlot","nestScreenTemplates","chain","reduceRight","inner","outer","placeInside","innerContent","flatMap","composeScreenElement","screen","shell","shellComponentForLayout","Error","externalComponent","screenName","slotContent"],"mappings":";;;;;;;;AAAA;AACA;AAMA;;;;;;;;;;;AAWC,IACM,SAASA,uBAAAA,CAAwBC,QAAwB,EAAEC,MAAc,EAAA;IAC5E,MAAMC,WAAAA,GAAc,IAAIC,GAAAA,CAAIF,MAAAA,CAAOG,KAAK,CAACC,GAAG,CAACC,CAAAA,IAAAA,GAAQA,IAAAA,CAAKC,IAAI,CAAA,CAAA;AAC9D,IAAA,MAAMC,SAAyC,EAAC;IAChD,MAAMC,YAAAA,GAAeT,SAASI,KAAK,CAACC,GAAG,CAACC,CAAAA,IAAAA,GAAQA,IAAAA,CAAKC,IAAI,CAAA;AACzD,IAAA,MAAMG,OAAAA,GAAUV,QAAAA,CAASU,OAAO,IAAI,EAAC;IAErC,KAAK,MAAMC,YAAYF,YAAAA,CAAc;QACjC,MAAMG,QAAAA,GAAWF,OAAO,CAACC,QAAAA,CAAS;AAClC,QAAA,IAAI,CAACC,QAAAA,IAAYA,QAAAA,CAASC,MAAM,KAAK,CAAA,EAAG;AACpC,YAAA;AACJ,QAAA;AAEA,QAAA,MAAMC,SAASZ,WAAAA,CAAYa,GAAG,CAACJ,QAAAA,CAAAA,GAAYA,QAAAA,GAAWX,SAASgB,QAAQ;AACvE,QAAA,IAAI,CAACF,MAAAA,EAAQ;AACT,YAAA;AACJ,QAAA;QAEAN,MAAM,CAACM,OAAO,GAAG;eAAKN,MAAM,CAACM,MAAAA,CAAO,IAAI,EAAE;AAAMF,YAAAA,GAAAA;AAAS,SAAA;AAC7D,IAAA;IAEA,OAAOJ,MAAAA;AACX;AAEA;;;;;;;;;;;;;;IAeO,SAASS,mBAAAA,CAAoBC,KAAuB,EAAA;IACvD,OAAOA,KAAAA,CAAMC,WAAW,CAAC,CAACC,KAAAA,EAAOC,QAAWD,KAAAA,KAAUC,KAAAA,GAAQA,KAAAA,GAAQC,WAAAA,CAAYD,KAAAA,EAAOD,KAAAA,CAAAA,CAAAA;AAC7F;AAEA,SAASE,WAAAA,CAAYD,KAAqB,EAAED,KAAqB,EAAA;IAC7D,IAAI,CAACA,KAAAA,CAAMJ,QAAQ,EAAE;QACjB,OAAOK,KAAAA;AACX,IAAA;AAEA,IAAA,MAAME,eAAeH,KAAAA,CAAMhB,KAAK,CAACoB,OAAO,CAAClB,CAAAA,IAAAA,GAAQc,KAAAA,CAAMV,OAAO,GAAGJ,IAAAA,CAAKC,IAAI,CAAC,IAAI,EAAE,CAAA;IACjF,OAAO;AACH,QAAA,GAAGc,KAAK;QACRX,OAAAA,EAAS;AACL,YAAA,GAAGW,MAAMX,OAAO;YAChB,CAACU,KAAAA,CAAMJ,QAAQ,GAAG;AAAKK,gBAAAA,GAAAA,KAAAA,CAAMX,OAAO,GAAGU,MAAMJ,QAAQ,CAAC,IAAI,EAAE;AAAMO,gBAAAA,GAAAA;AAAa;AACnF;AACJ,KAAA;AACJ;AAEA;;;;;;;;;;IAWO,SAASE,oBAAAA,CAAqBC,MAAc,EAAA;IAC/C,MAAMC,KAAAA,GAAQC,uCAAAA,CAAwBF,MAAAA,CAAOzB,MAAM,CAAA;AACnD,IAAA,IAAI,CAAC0B,KAAAA,EAAO;AACR,QAAA,MAAM,IAAIE,KAAAA,CAAM,CAAC,QAAQ,EAAEH,MAAAA,CAAOnB,IAAI,CAAC,oBAAoB,EAAEmB,MAAAA,CAAOzB,MAAM,CAAC,yCAAyC,CAAC,CAAA;AACzH,IAAA;IAEA,OAAO6B,0BAAAA,CAAkB,CAAC,OAAO,EAAEJ,OAAOnB,IAAI,CAAA,CAAE,EAAEoB,KAAAA,EAAO;AAAEI,QAAAA,UAAAA,EAAYL,OAAOnB;AAAK,KAAA,EAAGmB,OAAOM,WAAW,CAAA;AAC5G;;;;;;"}

package/dist/cjs/gallery/dependencyComponentNames.js

@@ -0,0 +1,72 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The component names the gallery borrows from this blueprint's dependencies.
+ *
+ * A screen template names components by their **bare** name and lets `resolveComponentName` pick the
+ * package, which is what makes a template portable across profiles. The cost is that a template can
+ * reference a name no active package declares, and the only symptom is a dashed red placeholder in the
+ * middle of an otherwise fine screen.
+ *
+ * Every name below was checked against the owning package's own manifest - `primeReactPackage.ts` and
+ * `cratisComponentsPackage.ts` - rather than assumed. Two that a dashboard obviously wants, `chart` and
+ * `fileUpload`, are deliberately absent from both, so the templates use what does exist (a table of
+ * figures, an image beside a button) rather than referencing something that would not render.
+ *
+ * This list exists because this package does not take an npm dependency on either of those packages - a
+ * blueprint declares its dependencies in its manifest, not in its bundler graph. When a host wires the
+ * real manifests together, it should resolve against those instead, and any name that drifted will fail
+ * this blueprint's specs immediately.
+ */ /**
+ * Names borrowed from the `PrimeReact` package, each present in its declared component list.
+ *
+ * `menu`, `breadcrumb` and `sidebar` are here even though the gallery uses this blueprint's versions of
+ * them, because PrimeReact really does declare all three - and leaving them out would hide the shadowing
+ * that makes a blueprint's own shell components win those bare names.
+ */ const primeReactComponentNames = [
+    'avatar',
+    'breadcrumb',
+    'calendar',
+    'card',
+    'checkbox',
+    'column',
+    'dataTable',
+    'dropdown',
+    'image',
+    'menu',
+    'sidebar',
+    'inputNumber',
+    'inputText',
+    'inputTextarea',
+    'message',
+    'password',
+    'progressBar',
+    'steps',
+    'tag',
+    'text',
+    'timeline'
+];
+/**
+ * Names borrowed from the `Cratis.Components` package.
+ *
+ * Deliberately short. The gallery's templates are built from primitives so that they stay legible as
+ * *structure*; an application replaces a seeded table with a real `dataPage` bound to a query, and that is
+ * the point at which the Arc-bound composites earn their place.
+ */ const cratisComponentsNames = [
+    'dataPage',
+    'observableDataTable',
+    'commandDialog',
+    'dialog'
+];
+/** The names `core` guarantees, regardless of which packages a profile lists. */ const coreComponentNames = [
+    'text',
+    'button',
+    'card'
+];
+
+exports.coreComponentNames = coreComponentNames;
+exports.cratisComponentsNames = cratisComponentsNames;
+exports.primeReactComponentNames = primeReactComponentNames;
+//# sourceMappingURL=dependencyComponentNames.js.map

package/dist/cjs/gallery/dependencyComponentNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencyComponentNames.js","sources":["../../../gallery/dependencyComponentNames.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/**\n * The component names the gallery borrows from this blueprint's dependencies.\n *\n * A screen template names components by their **bare** name and lets `resolveComponentName` pick the\n * package, which is what makes a template portable across profiles. The cost is that a template can\n * reference a name no active package declares, and the only symptom is a dashed red placeholder in the\n * middle of an otherwise fine screen.\n *\n * Every name below was checked against the owning package's own manifest - `primeReactPackage.ts` and\n * `cratisComponentsPackage.ts` - rather than assumed. Two that a dashboard obviously wants, `chart` and\n * `fileUpload`, are deliberately absent from both, so the templates use what does exist (a table of\n * figures, an image beside a button) rather than referencing something that would not render.\n *\n * This list exists because this package does not take an npm dependency on either of those packages - a\n * blueprint declares its dependencies in its manifest, not in its bundler graph. When a host wires the\n * real manifests together, it should resolve against those instead, and any name that drifted will fail\n * this blueprint's specs immediately.\n */\n\n/**\n * Names borrowed from the `PrimeReact` package, each present in its declared component list.\n *\n * `menu`, `breadcrumb` and `sidebar` are here even though the gallery uses this blueprint's versions of\n * them, because PrimeReact really does declare all three - and leaving them out would hide the shadowing\n * that makes a blueprint's own shell components win those bare names.\n */\nexport const primeReactComponentNames: string[] = [\n    'avatar',\n    'breadcrumb',\n    'calendar',\n    'card',\n    'checkbox',\n    'column',\n    'dataTable',\n    'dropdown',\n    'image',\n    'menu',\n    'sidebar',\n    'inputNumber',\n    'inputText',\n    'inputTextarea',\n    'message',\n    'password',\n    'progressBar',\n    'steps',\n    'tag',\n    'text',\n    'timeline',\n];\n\n/**\n * Names borrowed from the `Cratis.Components` package.\n *\n * Deliberately short. The gallery's templates are built from primitives so that they stay legible as\n * *structure*; an application replaces a seeded table with a real `dataPage` bound to a query, and that is\n * the point at which the Arc-bound composites earn their place.\n */\nexport const cratisComponentsNames: string[] = ['dataPage', 'observableDataTable', 'commandDialog', 'dialog'];\n\n/** The names `core` guarantees, regardless of which packages a profile lists. */\nexport const coreComponentNames: string[] = ['text', 'button', 'card'];\n"],"names":["primeReactComponentNames","cratisComponentsNames","coreComponentNames"],"mappings":";;AAAA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;;;UA0BaA,wBAAAA,GAAqC;AAC9C,IAAA,QAAA;AACA,IAAA,YAAA;AACA,IAAA,UAAA;AACA,IAAA,MAAA;AACA,IAAA,UAAA;AACA,IAAA,QAAA;AACA,IAAA,WAAA;AACA,IAAA,UAAA;AACA,IAAA,OAAA;AACA,IAAA,MAAA;AACA,IAAA,SAAA;AACA,IAAA,aAAA;AACA,IAAA,WAAA;AACA,IAAA,eAAA;AACA,IAAA,SAAA;AACA,IAAA,UAAA;AACA,IAAA,aAAA;AACA,IAAA,OAAA;AACA,IAAA,KAAA;AACA,IAAA,MAAA;AACA,IAAA;;AAGJ;;;;;;UAOaC,qBAAAA,GAAkC;AAAC,IAAA,UAAA;AAAY,IAAA,qBAAA;AAAuB,IAAA,eAAA;AAAiB,IAAA;;AAEpG,kFACO,MAAMC,kBAAAA,GAA+B;AAAC,IAAA,MAAA;AAAQ,IAAA,QAAA;AAAU,IAAA;;;;;;;"}

package/dist/cjs/gallery/dialogTemplates.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var TemplateSlotName = require('./TemplateSlotName.js');
+var elements = require('./elements.js');
+var widgets = require('./widgets.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The three dialog shapes an application repeats: confirm something destructive, capture a short form, and
+ * show a record without leaving the list behind it.
+ *
+ * A dialog template has no `fitsSlot`, and that absence is the whole distinction. A screen template is
+ * *placed* - it fills a slot on whatever contains it, and the containment chain is what decides where it
+ * appears. A dialog is *summoned*: it opens over the application from wherever the code that opened it
+ * happens to be, so there is no parent slot for it to name.
+ */ /** Confirm: one question, two answers, and enough context to answer it. */ const confirmDialogTemplate = {
+    name: 'ConfirmDialog',
+    slots: [
+        {
+            name: TemplateSlotName.TemplateSlotName.Header
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Actions
+        }
+    ],
+    content: {
+        [TemplateSlotName.TemplateSlotName.Header]: [
+            elements.text('confirm-title', 'Archive this product?')
+        ],
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.text('confirm-message', 'Bamboo Watch will stop appearing in the catalog. Existing orders keep it.'),
+            elements.externalComponent('confirm-note', 'message', {
+                severity: 'warn',
+                text: 'This can be undone from the archive.'
+            })
+        ],
+        [TemplateSlotName.TemplateSlotName.Actions]: [
+            elements.panel('confirm-actions', [
+                elements.button('confirm-yes', 'Archive', {
+                    severity: 'danger'
+                }),
+                elements.button('confirm-no', 'Keep it', {
+                    severity: 'secondary'
+                })
+            ])
+        ]
+    },
+    displayName: 'Confirmation dialog',
+    description: 'One question with the consequence spelled out, and a way back.'
+};
+/** Form: a short capture that does not deserve a page of its own. */ const formDialogTemplate = {
+    name: 'FormDialog',
+    slots: [
+        {
+            name: TemplateSlotName.TemplateSlotName.Header
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Actions
+        }
+    ],
+    content: {
+        [TemplateSlotName.TemplateSlotName.Header]: [
+            elements.text('form-dialog-title', 'Invite someone')
+        ],
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            widgets.field('form-dialog-email', 'Email', 'inputText', {
+                placeholder: 'them@contoso.com'
+            }),
+            widgets.field('form-dialog-role', 'Role', 'dropdown', {
+                options: [
+                    'Viewer',
+                    'Editor',
+                    'Administrator'
+                ]
+            }),
+            widgets.field('form-dialog-message', 'Message', 'inputTextarea', {
+                rows: 3
+            })
+        ],
+        [TemplateSlotName.TemplateSlotName.Actions]: [
+            elements.panel('form-dialog-actions', [
+                elements.button('form-dialog-send', 'Send invitation', {
+                    severity: 'primary'
+                }),
+                elements.button('form-dialog-cancel', 'Cancel', {
+                    severity: 'secondary'
+                })
+            ])
+        ]
+    },
+    displayName: 'Form dialog',
+    description: 'A handful of fields captured without leaving the page underneath.'
+};
+/** Detail: a record shown over the list it came from. */ const detailDialogTemplate = {
+    name: 'DetailDialog',
+    slots: [
+        {
+            name: TemplateSlotName.TemplateSlotName.Header
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.SidePanel
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Actions
+        }
+    ],
+    content: {
+        [TemplateSlotName.TemplateSlotName.Header]: [
+            elements.text('detail-dialog-title', 'ORD-4192')
+        ],
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('detail-dialog-summary', [
+                elements.text('detail-dialog-customer', 'Northwind Traders'),
+                elements.text('detail-dialog-total', '$1,240.00'),
+                elements.externalComponent('detail-dialog-status', 'tag', {
+                    value: 'Shipped',
+                    severity: 'success'
+                })
+            ])
+        ],
+        [TemplateSlotName.TemplateSlotName.SidePanel]: [
+            elements.externalComponent('detail-dialog-timeline', 'timeline', {
+                align: 'left'
+            })
+        ],
+        [TemplateSlotName.TemplateSlotName.Actions]: [
+            elements.panel('detail-dialog-actions', [
+                elements.button('detail-dialog-open', 'Open full record', {
+                    severity: 'primary',
+                    targetScreen: 'DetailView'
+                }),
+                elements.button('detail-dialog-close', 'Close', {
+                    severity: 'secondary'
+                })
+            ])
+        ]
+    },
+    displayName: 'Detail dialog',
+    description: 'A record over the list it came from, with a route to the full page.'
+};
+/** The dialog templates this blueprint provides. */ const galleryDialogTemplates = [
+    confirmDialogTemplate,
+    formDialogTemplate,
+    detailDialogTemplate
+];
+
+exports.confirmDialogTemplate = confirmDialogTemplate;
+exports.detailDialogTemplate = detailDialogTemplate;
+exports.formDialogTemplate = formDialogTemplate;
+exports.galleryDialogTemplates = galleryDialogTemplates;
+//# sourceMappingURL=dialogTemplates.js.map

package/dist/cjs/gallery/dialogTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTemplates.js","sources":["../../../gallery/dialogTemplates.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 { DialogTemplate } from '@cratis/scene.model';\nimport { TemplateSlotName } from './TemplateSlotName';\nimport { button, card, externalComponent, panel, text } from './elements';\nimport { field } from './widgets';\n\n/**\n * The three dialog shapes an application repeats: confirm something destructive, capture a short form, and\n * show a record without leaving the list behind it.\n *\n * A dialog template has no `fitsSlot`, and that absence is the whole distinction. A screen template is\n * *placed* - it fills a slot on whatever contains it, and the containment chain is what decides where it\n * appears. A dialog is *summoned*: it opens over the application from wherever the code that opened it\n * happens to be, so there is no parent slot for it to name.\n */\n\n/** Confirm: one question, two answers, and enough context to answer it. */\nexport const confirmDialogTemplate: DialogTemplate = {\n    name: 'ConfirmDialog',\n    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],\n    content: {\n        [TemplateSlotName.Header]: [text('confirm-title', 'Archive this product?')],\n        [TemplateSlotName.Body]: [\n            text('confirm-message', 'Bamboo Watch will stop appearing in the catalog. Existing orders keep it.'),\n            externalComponent('confirm-note', 'message', { severity: 'warn', text: 'This can be undone from the archive.' }),\n        ],\n        [TemplateSlotName.Actions]: [\n            panel('confirm-actions', [button('confirm-yes', 'Archive', { severity: 'danger' }), button('confirm-no', 'Keep it', { severity: 'secondary' })]),\n        ],\n    },\n    displayName: 'Confirmation dialog',\n    description: 'One question with the consequence spelled out, and a way back.',\n};\n\n/** Form: a short capture that does not deserve a page of its own. */\nexport const formDialogTemplate: DialogTemplate = {\n    name: 'FormDialog',\n    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],\n    content: {\n        [TemplateSlotName.Header]: [text('form-dialog-title', 'Invite someone')],\n        [TemplateSlotName.Body]: [\n            field('form-dialog-email', 'Email', 'inputText', { placeholder: 'them@contoso.com' }),\n            field('form-dialog-role', 'Role', 'dropdown', { options: ['Viewer', 'Editor', 'Administrator'] }),\n            field('form-dialog-message', 'Message', 'inputTextarea', { rows: 3 }),\n        ],\n        [TemplateSlotName.Actions]: [\n            panel('form-dialog-actions', [button('form-dialog-send', 'Send invitation', { severity: 'primary' }), button('form-dialog-cancel', 'Cancel', { severity: 'secondary' })]),\n        ],\n    },\n    displayName: 'Form dialog',\n    description: 'A handful of fields captured without leaving the page underneath.',\n};\n\n/** Detail: a record shown over the list it came from. */\nexport const detailDialogTemplate: DialogTemplate = {\n    name: 'DetailDialog',\n    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.SidePanel }, { name: TemplateSlotName.Actions }],\n    content: {\n        [TemplateSlotName.Header]: [text('detail-dialog-title', 'ORD-4192')],\n        [TemplateSlotName.Body]: [\n            card('detail-dialog-summary', [\n                text('detail-dialog-customer', 'Northwind Traders'),\n                text('detail-dialog-total', '$1,240.00'),\n                externalComponent('detail-dialog-status', 'tag', { value: 'Shipped', severity: 'success' }),\n            ]),\n        ],\n        [TemplateSlotName.SidePanel]: [externalComponent('detail-dialog-timeline', 'timeline', { align: 'left' })],\n        [TemplateSlotName.Actions]: [\n            panel('detail-dialog-actions', [button('detail-dialog-open', 'Open full record', { severity: 'primary', targetScreen: 'DetailView' }), button('detail-dialog-close', 'Close', { severity: 'secondary' })]),\n        ],\n    },\n    displayName: 'Detail dialog',\n    description: 'A record over the list it came from, with a route to the full page.',\n};\n\n/** The dialog templates this blueprint provides. */\nexport const galleryDialogTemplates: DialogTemplate[] = [confirmDialogTemplate, formDialogTemplate, detailDialogTemplate];\n"],"names":["confirmDialogTemplate","name","slots","TemplateSlotName","Header","Body","Actions","content","text","externalComponent","severity","panel","button","displayName","description","formDialogTemplate","field","placeholder","options","rows","detailDialogTemplate","SidePanel","card","value","align","targetScreen","galleryDialogTemplates"],"mappings":"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"}

package/dist/cjs/gallery/elements.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Constructors for the element trees the gallery templates are built from.
+ *
+ * `ExternalComponent` inherits fifteen required members from `FrameworkElement` and `VisualElement` -
+ * visibility, opacity, z-index, both size constraints, margin and both alignments - before it gets to the
+ * two that matter to a template author. Written as object literals, a page of realistic content is
+ * ninety percent boilerplate and unreadable. These put the defaults in one place so a template reads as
+ * the tree it is.
+ */ const elementDefaults = {
+    properties: {},
+    visibility: scene_model.Visibility.Visible,
+    isEnabled: true,
+    opacity: 1,
+    size: {},
+    zIndex: 0,
+    minimumSize: {},
+    maximumSize: {},
+    margin: {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    },
+    horizontalAlignment: scene_model.HorizontalAlignment.Stretch,
+    verticalAlignment: scene_model.VerticalAlignment.Stretch
+};
+/**
+ * An {@link ExternalComponent} naming a component by its **bare** name.
+ *
+ * Bare rather than package-qualified on purpose: `resolveComponentName` then decides which active package
+ * wins the name against the profile's priority order, so the same template renders with PrimeReact's
+ * widgets in one profile and somebody else's in another. A template that qualified its names would pin
+ * itself to one library and stop being a template.
+ */ function externalComponent(id, componentName, properties = {}, slots = {}) {
+    return {
+        ...elementDefaults,
+        id,
+        name: id,
+        properties,
+        componentName,
+        slots
+    };
+}
+/** A {@link Panel} grouping children, for a row or column of content inside a slot. */ function panel(id, children) {
+    return {
+        ...elementDefaults,
+        id,
+        name: id,
+        children
+    };
+}
+/** A `core:text` run - the one component name guaranteed to resolve in every profile. */ function text(id, value) {
+    return externalComponent(id, 'text', {
+        text: value
+    });
+}
+/** A `core:button`. */ function button(id, label, properties = {}) {
+    return externalComponent(id, 'button', {
+        label,
+        ...properties
+    });
+}
+/** A `core:card` wrapping content. */ function card(id, content, properties = {}) {
+    return externalComponent(id, 'card', properties, {
+        content
+    });
+}
+
+exports.button = button;
+exports.card = card;
+exports.externalComponent = externalComponent;
+exports.panel = panel;
+exports.text = text;
+//# sourceMappingURL=elements.js.map

package/dist/cjs/gallery/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sources":["../../../gallery/elements.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 { ExternalComponent, HorizontalAlignment, Panel, SceneElement, VerticalAlignment, Visibility } from '@cratis/scene.model';\n\n/**\n * Constructors for the element trees the gallery templates are built from.\n *\n * `ExternalComponent` inherits fifteen required members from `FrameworkElement` and `VisualElement` -\n * visibility, opacity, z-index, both size constraints, margin and both alignments - before it gets to the\n * two that matter to a template author. Written as object literals, a page of realistic content is\n * ninety percent boilerplate and unreadable. These put the defaults in one place so a template reads as\n * the tree it is.\n */\n\nconst elementDefaults = {\n    properties: {},\n    visibility: Visibility.Visible,\n    isEnabled: true,\n    opacity: 1,\n    size: {},\n    zIndex: 0,\n    minimumSize: {},\n    maximumSize: {},\n    margin: { left: 0, top: 0, right: 0, bottom: 0 },\n    horizontalAlignment: HorizontalAlignment.Stretch,\n    verticalAlignment: VerticalAlignment.Stretch,\n};\n\n/**\n * An {@link ExternalComponent} naming a component by its **bare** name.\n *\n * Bare rather than package-qualified on purpose: `resolveComponentName` then decides which active package\n * wins the name against the profile's priority order, so the same template renders with PrimeReact's\n * widgets in one profile and somebody else's in another. A template that qualified its names would pin\n * itself to one library and stop being a template.\n */\nexport function externalComponent(\n    id: string,\n    componentName: string,\n    properties: Record<string, unknown> = {},\n    slots: Record<string, SceneElement[]> = {},\n): ExternalComponent {\n    return { ...elementDefaults, id, name: id, properties, componentName, slots };\n}\n\n/** A {@link Panel} grouping children, for a row or column of content inside a slot. */\nexport function panel(id: string, children: SceneElement[]): Panel {\n    return { ...elementDefaults, id, name: id, children };\n}\n\n/** A `core:text` run - the one component name guaranteed to resolve in every profile. */\nexport function text(id: string, value: string): ExternalComponent {\n    return externalComponent(id, 'text', { text: value });\n}\n\n/** A `core:button`. */\nexport function button(id: string, label: string, properties: Record<string, unknown> = {}): ExternalComponent {\n    return externalComponent(id, 'button', { label, ...properties });\n}\n\n/** A `core:card` wrapping content. */\nexport function card(id: string, content: SceneElement[], properties: Record<string, unknown> = {}): ExternalComponent {\n    return externalComponent(id, 'card', properties, { content });\n}\n"],"names":["elementDefaults","properties","visibility","Visibility","Visible","isEnabled","opacity","size","zIndex","minimumSize","maximumSize","margin","left","top","right","bottom","horizontalAlignment","HorizontalAlignment","Stretch","verticalAlignment","VerticalAlignment","externalComponent","id","componentName","slots","name","panel","children","text","value","button","label","card","content"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;AAQC,IAED,MAAMA,eAAAA,GAAkB;AACpBC,IAAAA,UAAAA,EAAY,EAAC;AACbC,IAAAA,UAAAA,EAAYC,uBAAWC,OAAO;IAC9BC,SAAAA,EAAW,IAAA;IACXC,OAAAA,EAAS,CAAA;AACTC,IAAAA,IAAAA,EAAM,EAAC;IACPC,MAAAA,EAAQ,CAAA;AACRC,IAAAA,WAAAA,EAAa,EAAC;AACdC,IAAAA,WAAAA,EAAa,EAAC;IACdC,MAAAA,EAAQ;QAAEC,IAAAA,EAAM,CAAA;QAAGC,GAAAA,EAAK,CAAA;QAAGC,KAAAA,EAAO,CAAA;QAAGC,MAAAA,EAAQ;AAAE,KAAA;AAC/CC,IAAAA,mBAAAA,EAAqBC,gCAAoBC,OAAO;AAChDC,IAAAA,iBAAAA,EAAmBC,8BAAkBF;AACzC,CAAA;AAEA;;;;;;;AAOC,IACM,SAASG,iBAAAA,CACZC,EAAU,EACVC,aAAqB,EACrBtB,UAAAA,GAAsC,EAAE,EACxCuB,KAAAA,GAAwC,EAAE,EAAA;IAE1C,OAAO;AAAE,QAAA,GAAGxB,eAAe;AAAEsB,QAAAA,EAAAA;QAAIG,IAAAA,EAAMH,EAAAA;AAAIrB,QAAAA,UAAAA;AAAYsB,QAAAA,aAAAA;AAAeC,QAAAA;AAAM,KAAA;AAChF;AAEA,wFACO,SAASE,KAAAA,CAAMJ,EAAU,EAAEK,QAAwB,EAAA;IACtD,OAAO;AAAE,QAAA,GAAG3B,eAAe;AAAEsB,QAAAA,EAAAA;QAAIG,IAAAA,EAAMH,EAAAA;AAAIK,QAAAA;AAAS,KAAA;AACxD;AAEA,0FACO,SAASC,IAAAA,CAAKN,EAAU,EAAEO,KAAa,EAAA;IAC1C,OAAOR,iBAAAA,CAAkBC,IAAI,MAAA,EAAQ;QAAEM,IAAAA,EAAMC;AAAM,KAAA,CAAA;AACvD;AAEA,wBACO,SAASC,MAAAA,CAAOR,EAAU,EAAES,KAAa,EAAE9B,UAAAA,GAAsC,EAAE,EAAA;IACtF,OAAOoB,iBAAAA,CAAkBC,IAAI,QAAA,EAAU;AAAES,QAAAA,KAAAA;AAAO,QAAA,GAAG9B;AAAW,KAAA,CAAA;AAClE;AAEA,uCACO,SAAS+B,IAAAA,CAAKV,EAAU,EAAEW,OAAuB,EAAEhC,UAAAA,GAAsC,EAAE,EAAA;IAC9F,OAAOoB,iBAAAA,CAAkBC,EAAAA,EAAI,MAAA,EAAQrB,UAAAA,EAAY;AAAEgC,QAAAA;AAAQ,KAAA,CAAA;AAC/D;;;;;;;;"}

package/dist/cjs/gallery/navigation.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var ComponentName = require('../ComponentName.js');
+var elements = require('./elements.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The contribution point the built-in navigation aggregation reads. */ const navigationContributionPoint = 'Navigation';
+/**
+ * The gallery's navigation, declared once.
+ *
+ * One list, two consumers: the sidebar menu renders it as `menuItem` elements, and the same elements go to
+ * the `Navigation` contribution point where `aggregateContributions` + `extractNavigationItem` turn them
+ * back into navigation items. A blueprint that maintained a menu *and* a separate navigation declaration
+ * would have two lists that agree right up until someone adds a screen to one of them.
+ */ const navigationEntries = [
+    {
+        label: 'Dashboard',
+        targetScreen: 'Dashboard',
+        icon: 'pi pi-home',
+        group: 'Workspace',
+        order: 10
+    },
+    {
+        label: 'Products',
+        targetScreen: 'CrudList',
+        icon: 'pi pi-box',
+        group: 'Workspace',
+        order: 20
+    },
+    {
+        label: 'Product detail',
+        targetScreen: 'DetailView',
+        icon: 'pi pi-file',
+        group: 'Workspace',
+        order: 30
+    },
+    {
+        label: 'New product',
+        targetScreen: 'FormPage',
+        icon: 'pi pi-plus-circle',
+        group: 'Workspace',
+        order: 40
+    },
+    {
+        label: 'Invoices',
+        targetScreen: 'Invoice',
+        icon: 'pi pi-receipt',
+        group: 'Workspace',
+        order: 50
+    },
+    {
+        label: 'Nothing yet',
+        targetScreen: 'Empty',
+        icon: 'pi pi-inbox',
+        group: 'Workspace',
+        order: 60
+    },
+    {
+        label: 'Users',
+        targetScreen: 'UserManagement',
+        icon: 'pi pi-users',
+        group: 'Administration',
+        order: 10
+    },
+    {
+        label: 'Your profile',
+        targetScreen: 'ProfileSettings',
+        icon: 'pi pi-user',
+        group: 'Administration',
+        order: 20
+    },
+    {
+        label: 'Documentation',
+        targetScreen: 'Documentation',
+        icon: 'pi pi-book',
+        group: 'Support',
+        order: 10
+    },
+    {
+        label: 'Help',
+        targetScreen: 'Help',
+        icon: 'pi pi-question-circle',
+        group: 'Support',
+        order: 20
+    }
+];
+/**
+ * The element one navigation entry becomes.
+ *
+ * `routeParameterBindings` is present and empty rather than omitted, because that is what
+ * `extractNavigationItem` expects to read - and an omitted bag and an empty one are the same thing right
+ * up until something iterates it.
+ */ function navigationElement(entry, activeScreen) {
+    return elements.externalComponent(`nav-${entry.targetScreen}`, ComponentName.ComponentName.MenuItem, {
+        label: entry.label,
+        targetScreen: entry.targetScreen,
+        routeParameterBindings: {},
+        order: entry.order,
+        group: entry.group,
+        icon: entry.icon,
+        isActive: entry.targetScreen === activeScreen
+    });
+}
+/**
+ * The navigation as contributions to the `Navigation` contribution point.
+ *
+ * A screen carries these in its `contributions`, and anything bound to the contribution point recomputes
+ * from whatever is currently in scope - so a screen that contributes an extra entry gets it in the
+ * navigation without the navigation knowing that screen exists.
+ */ const navigationContributions = navigationEntries.map((entry)=>({
+        contributionPointName: navigationContributionPoint,
+        content: navigationElement(entry),
+        order: entry.order
+    }));
+/** The navigation entries of one group, in order. */ function entriesInGroup(group) {
+    return navigationEntries.filter((entry)=>entry.group === group).sort((first, second)=>first.order - second.order);
+}
+/** Every group named by the navigation, in first-declared order. */ const navigationGroups = [
+    ...new Set(navigationEntries.map((entry)=>entry.group))
+];
+
+exports.entriesInGroup = entriesInGroup;
+exports.navigationContributionPoint = navigationContributionPoint;
+exports.navigationContributions = navigationContributions;
+exports.navigationElement = navigationElement;
+exports.navigationEntries = navigationEntries;
+exports.navigationGroups = navigationGroups;
+//# sourceMappingURL=navigation.js.map

package/dist/cjs/gallery/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sources":["../../../gallery/navigation.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 { Contribution, SceneElement } from '@cratis/scene.model';\nimport { ComponentName } from '../ComponentName';\nimport { NavigationEntry } from './NavigationEntry';\nimport { externalComponent } from './elements';\n\n/** The contribution point the built-in navigation aggregation reads. */\nexport const navigationContributionPoint = 'Navigation';\n\n/**\n * The gallery's navigation, declared once.\n *\n * One list, two consumers: the sidebar menu renders it as `menuItem` elements, and the same elements go to\n * the `Navigation` contribution point where `aggregateContributions` + `extractNavigationItem` turn them\n * back into navigation items. A blueprint that maintained a menu *and* a separate navigation declaration\n * would have two lists that agree right up until someone adds a screen to one of them.\n */\nexport const navigationEntries: NavigationEntry[] = [\n    { label: 'Dashboard', targetScreen: 'Dashboard', icon: 'pi pi-home', group: 'Workspace', order: 10 },\n    { label: 'Products', targetScreen: 'CrudList', icon: 'pi pi-box', group: 'Workspace', order: 20 },\n    { label: 'Product detail', targetScreen: 'DetailView', icon: 'pi pi-file', group: 'Workspace', order: 30 },\n    { label: 'New product', targetScreen: 'FormPage', icon: 'pi pi-plus-circle', group: 'Workspace', order: 40 },\n    { label: 'Invoices', targetScreen: 'Invoice', icon: 'pi pi-receipt', group: 'Workspace', order: 50 },\n    { label: 'Nothing yet', targetScreen: 'Empty', icon: 'pi pi-inbox', group: 'Workspace', order: 60 },\n    { label: 'Users', targetScreen: 'UserManagement', icon: 'pi pi-users', group: 'Administration', order: 10 },\n    { label: 'Your profile', targetScreen: 'ProfileSettings', icon: 'pi pi-user', group: 'Administration', order: 20 },\n    { label: 'Documentation', targetScreen: 'Documentation', icon: 'pi pi-book', group: 'Support', order: 10 },\n    { label: 'Help', targetScreen: 'Help', icon: 'pi pi-question-circle', group: 'Support', order: 20 },\n];\n\n/**\n * The element one navigation entry becomes.\n *\n * `routeParameterBindings` is present and empty rather than omitted, because that is what\n * `extractNavigationItem` expects to read - and an omitted bag and an empty one are the same thing right\n * up until something iterates it.\n */\nexport function navigationElement(entry: NavigationEntry, activeScreen?: string): SceneElement {\n    return externalComponent(`nav-${entry.targetScreen}`, ComponentName.MenuItem, {\n        label: entry.label,\n        targetScreen: entry.targetScreen,\n        routeParameterBindings: {},\n        order: entry.order,\n        group: entry.group,\n        icon: entry.icon,\n        isActive: entry.targetScreen === activeScreen,\n    });\n}\n\n/**\n * The navigation as contributions to the `Navigation` contribution point.\n *\n * A screen carries these in its `contributions`, and anything bound to the contribution point recomputes\n * from whatever is currently in scope - so a screen that contributes an extra entry gets it in the\n * navigation without the navigation knowing that screen exists.\n */\nexport const navigationContributions: Contribution[] = navigationEntries.map(entry => ({\n    contributionPointName: navigationContributionPoint,\n    content: navigationElement(entry),\n    order: entry.order,\n}));\n\n/** The navigation entries of one group, in order. */\nexport function entriesInGroup(group: string): NavigationEntry[] {\n    return navigationEntries.filter(entry => entry.group === group).sort((first, second) => first.order - second.order);\n}\n\n/** Every group named by the navigation, in first-declared order. */\nexport const navigationGroups: string[] = [...new Set(navigationEntries.map(entry => entry.group))];\n"],"names":["navigationContributionPoint","navigationEntries","label","targetScreen","icon","group","order","navigationElement","entry","activeScreen","externalComponent","ComponentName","MenuItem","routeParameterBindings","isActive","navigationContributions","map","contributionPointName","content","entriesInGroup","filter","sort","first","second","navigationGroups","Set"],"mappings":"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"}