@cratis/scene.blueprint.default 0.1.0

package/dist/cjs/gallery/GalleryScreenPreview.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var defaultBlueprintComponents = require('../defaultBlueprintComponents.js');
+var defaultBlueprintThemes = require('../themes/defaultBlueprintThemes.js');
+var LayoutThemeProvider = require('../themes/LayoutThemeProvider.js');
+var composeScreen = require('./composeScreen.js');
+var previewProfile = require('./previewProfile.js');
+var resolveElementNames = require('./resolveElementNames.js');
+var screens = require('./screens.js');
+
+/**
+ * The registry a preview resolves against when a host does not supply one: `core` plus this blueprint.
+ *
+ * Merged by hand rather than through `mergePackageRegistries`, because reaching for this blueprint's
+ * *bundle* here would be circular - the bundle is assembled from the gallery this file belongs to. Registry
+ * keys carry their package name, so merge order cannot cause a collision either way.
+ */ const galleryPreviewRegistry = {
+    ...scene_react.coreComponents,
+    ...defaultBlueprintComponents.defaultBlueprintComponents
+};
+/**
+ * Boots one gallery screen through the real engine.
+ *
+ * Nothing here is a preview-only path: the screen is a real {@link Screen}, its element tree is resolved by
+ * the real `resolveComponentName`, and it is rendered by the real `SceneElementView` against the real
+ * registry. That is the point of shipping a gallery at all - a mockup proves that someone can draw a
+ * dashboard, and this proves the blueprint renders one.
+ *
+ * Component names belonging to packages the host has not loaded resolve but find no implementation, and
+ * come out as `UnresolvedComponent`'s dashed red box naming what is missing. That is the designed outcome:
+ * a preview of a blueprint against half a profile should look visibly incomplete rather than quietly
+ * wrong.
+ */ function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes.defaultBlueprintThemes, registry = galleryPreviewRegistry }) {
+    const element = react.useMemo(()=>{
+        const screen = screens.galleryScreen(screenName);
+        if (!screen) {
+            throw new Error(`The gallery has no screen named '${screenName}'.`);
+        }
+        return resolveElementNames.resolveElementComponentNames(composeScreen.composeScreenElement(screen), previewProfile.galleryPreviewProfile, previewProfile.galleryComponentCatalog);
+    }, [
+        screenName
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(LayoutConfigProvider.LayoutConfigProvider, {
+        initialConfig: initialConfig,
+        storage: null,
+        children: /*#__PURE__*/ jsxRuntime.jsx(LayoutThemeProvider.LayoutThemeProvider, {
+            themes: themes,
+            children: /*#__PURE__*/ jsxRuntime.jsx(scene_react.SceneElementView, {
+                element: element,
+                registry: registry,
+                resolveBinding: ()=>undefined
+            })
+        })
+    });
+}
+
+exports.GalleryScreenPreview = GalleryScreenPreview;
+exports.galleryPreviewRegistry = galleryPreviewRegistry;
+//# sourceMappingURL=GalleryScreenPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryScreenPreview.js","sources":["../../../gallery/GalleryScreenPreview.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { Theme } from '@cratis/scene.model';\nimport { ComponentRegistry, SceneElementView, coreComponents } from '@cratis/scene.react';\nimport { LayoutConfigProvider, LayoutConfigState } from '../configuration';\nimport { defaultBlueprintComponents } from '../defaultBlueprintComponents';\nimport { LayoutThemeProvider, defaultBlueprintThemes } from '../themes';\nimport { composeScreenElement } from './composeScreen';\nimport { galleryComponentCatalog, galleryPreviewProfile } from './previewProfile';\nimport { resolveElementComponentNames } from './resolveElementNames';\nimport { galleryScreen } from './screens';\n\n/**\n * The registry a preview resolves against when a host does not supply one: `core` plus this blueprint.\n *\n * Merged by hand rather than through `mergePackageRegistries`, because reaching for this blueprint's\n * *bundle* here would be circular - the bundle is assembled from the gallery this file belongs to. Registry\n * keys carry their package name, so merge order cannot cause a collision either way.\n */\nexport const galleryPreviewRegistry: ComponentRegistry = { ...coreComponents, ...defaultBlueprintComponents };\n\nexport interface GalleryScreenPreviewProps {\n    /** The name of the gallery screen to boot. */\n    screenName: string;\n\n    /** Configuration to start from - a story pinning a mode, or a host restoring a session. */\n    initialConfig?: Partial<LayoutConfigState>;\n\n    /** The themes the configurator may switch between. Defaults to the two this blueprint ships. */\n    themes?: Theme[];\n\n    /** The component registry to render against. Defaults to `core` plus this blueprint's own components. */\n    registry?: ComponentRegistry;\n}\n\n/**\n * Boots one gallery screen through the real engine.\n *\n * Nothing here is a preview-only path: the screen is a real {@link Screen}, its element tree is resolved by\n * the real `resolveComponentName`, and it is rendered by the real `SceneElementView` against the real\n * registry. That is the point of shipping a gallery at all - a mockup proves that someone can draw a\n * dashboard, and this proves the blueprint renders one.\n *\n * Component names belonging to packages the host has not loaded resolve but find no implementation, and\n * come out as `UnresolvedComponent`'s dashed red box naming what is missing. That is the designed outcome:\n * a preview of a blueprint against half a profile should look visibly incomplete rather than quietly\n * wrong.\n */\nexport function GalleryScreenPreview({ screenName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry }: GalleryScreenPreviewProps) {\n    const element = useMemo(() => {\n        const screen = galleryScreen(screenName);\n        if (!screen) {\n            throw new Error(`The gallery has no screen named '${screenName}'.`);\n        }\n\n        return resolveElementComponentNames(composeScreenElement(screen), galleryPreviewProfile, galleryComponentCatalog);\n    }, [screenName]);\n\n    return (\n        <LayoutConfigProvider initialConfig={initialConfig} storage={null}>\n            <LayoutThemeProvider themes={themes}>\n                <SceneElementView element={element} registry={registry} resolveBinding={() => undefined} />\n            </LayoutThemeProvider>\n        </LayoutConfigProvider>\n    );\n}\n"],"names":["galleryPreviewRegistry","coreComponents","defaultBlueprintComponents","GalleryScreenPreview","screenName","initialConfig","themes","defaultBlueprintThemes","registry","element","useMemo","screen","galleryScreen","Error","resolveElementComponentNames","composeScreenElement","galleryPreviewProfile","galleryComponentCatalog","_jsx","LayoutConfigProvider","storage","LayoutThemeProvider","SceneElementView","resolveBinding","undefined"],"mappings":";;;;;;;;;;;;;;AAcA;;;;;;UAOaA,sBAAAA,GAA4C;AAAE,IAAA,GAAGC,0BAAc;AAAE,IAAA,GAAGC;AAA2B;AAgB5G;;;;;;;;;;;;AAYC,IACM,SAASC,oBAAAA,CAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,MAAAA,GAASC,6CAAsB,EAAEC,QAAAA,GAAWR,sBAAsB,EAA6B,EAAA;AAC7J,IAAA,MAAMS,UAAUC,aAAAA,CAAQ,IAAA;AACpB,QAAA,MAAMC,SAASC,qBAAAA,CAAcR,UAAAA,CAAAA;AAC7B,QAAA,IAAI,CAACO,MAAAA,EAAQ;AACT,YAAA,MAAM,IAAIE,KAAAA,CAAM,CAAC,iCAAiC,EAAET,UAAAA,CAAW,EAAE,CAAC,CAAA;AACtE,QAAA;QAEA,OAAOU,gDAAAA,CAA6BC,kCAAAA,CAAqBJ,MAAAA,CAAAA,EAASK,oCAAAA,EAAuBC,sCAAAA,CAAAA;IAC7F,CAAA,EAAG;AAACb,QAAAA;AAAW,KAAA,CAAA;AAEf,IAAA,qBACIc,cAAA,CAACC,yCAAAA,EAAAA;QAAqBd,aAAAA,EAAeA,aAAAA;QAAee,OAAAA,EAAS,IAAA;AACzD,QAAA,QAAA,gBAAAF,cAAA,CAACG,uCAAAA,EAAAA;YAAoBf,MAAAA,EAAQA,MAAAA;AACzB,YAAA,QAAA,gBAAAY,cAAA,CAACI,4BAAAA,EAAAA;gBAAiBb,OAAAA,EAASA,OAAAA;gBAASD,QAAAA,EAAUA,QAAAA;AAAUe,gBAAAA,cAAAA,EAAgB,IAAMC;;;;AAI9F;;;;;"}

package/dist/cjs/gallery/TemplateSlotName.js

@@ -0,0 +1,25 @@
+'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 slots the gallery's screen templates offer to whatever they contain.
+ *
+ * Distinct from {@link SlotName}, which is the *layout's* vocabulary. A screen template declares its own
+ * slots, and a template nested inside it names one of these in `fitsSlot` - so the same name means
+ * different places at different depths, and that is fine: `fitsSlot` is always resolved against the direct
+ * parent, never globally.
+ */ var TemplateSlotName = /*#__PURE__*/ function(TemplateSlotName) {
+    /** A template's own title area. */ TemplateSlotName["Header"] = "header";
+    /** The main region a nested template fits into. */ TemplateSlotName["Body"] = "body";
+    /** An optional column beside the body. */ TemplateSlotName["SidePanel"] = "sidePanel";
+    /** The action strip above a body. */ TemplateSlotName["Toolbar"] = "toolbar";
+    /** Buttons belonging to a header or a form. */ TemplateSlotName["Actions"] = "actions";
+    /** The row of figures a dashboard opens with. */ TemplateSlotName["Stats"] = "stats";
+    /** The larger left-hand column of a dashboard. */ TemplateSlotName["Primary"] = "primary";
+    /** The narrower right-hand column of a dashboard. */ TemplateSlotName["Secondary"] = "secondary";
+    return TemplateSlotName;
+}({});
+
+exports.TemplateSlotName = TemplateSlotName;
+//# sourceMappingURL=TemplateSlotName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateSlotName.js","sources":["../../../gallery/TemplateSlotName.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 slots the gallery's screen templates offer to whatever they contain.\n *\n * Distinct from {@link SlotName}, which is the *layout's* vocabulary. A screen template declares its own\n * slots, and a template nested inside it names one of these in `fitsSlot` - so the same name means\n * different places at different depths, and that is fine: `fitsSlot` is always resolved against the direct\n * parent, never globally.\n */\nexport enum TemplateSlotName {\n    /** A template's own title area. */\n    Header = 'header',\n\n    /** The main region a nested template fits into. */\n    Body = 'body',\n\n    /** An optional column beside the body. */\n    SidePanel = 'sidePanel',\n\n    /** The action strip above a body. */\n    Toolbar = 'toolbar',\n\n    /** Buttons belonging to a header or a form. */\n    Actions = 'actions',\n\n    /** The row of figures a dashboard opens with. */\n    Stats = 'stats',\n\n    /** The larger left-hand column of a dashboard. */\n    Primary = 'primary',\n\n    /** The narrower right-hand column of a dashboard. */\n    Secondary = 'secondary',\n}\n"],"names":["TemplateSlotName"],"mappings":";;AAAA;AACA;AAEA;;;;;;;IAQO,IAAKA,gBAAAA,iBAAAA,SAAAA,gBAAAA,EAAAA;wCACyB,gBAAA,CAAA,QAAA,CAAA,GAAA,QAAA;wDAGgB,gBAAA,CAAA,MAAA,CAAA,GAAA,MAAA;+CAGT,gBAAA,CAAA,WAAA,CAAA,GAAA,WAAA;0CAGL,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAA;oDAGU,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAA;sDAGE,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAA;uDAGC,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAA;0DAGG,gBAAA,CAAA,WAAA,CAAA,GAAA,WAAA;AAtB3CA,IAAAA,OAAAA,gBAAAA;AAwBX,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/gallery/applicationChrome.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var ComponentName = require('../ComponentName.js');
+var SlotName = require('../layouts/SlotName.js');
+require('@cratis/scene.model');
+require('../layouts/shellComponents.js');
+require('../layouts/appShell.js');
+require('../layouts/fullPage.js');
+var defaultBlueprintThemes = require('../themes/defaultBlueprintThemes.js');
+require('react/jsx-runtime');
+require('react');
+require('@cratis/scene.react');
+var elements = require('./elements.js');
+var navigation = require('./navigation.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The chrome every screen in the application shell shares: the topbar, the sidebar, the menu, the footer
+ * and the configurator.
+ *
+ * It is built once, per screen, rather than repeated in twenty templates. A screen template describes what
+ * is *different* about a screen; if it also had to describe the topbar, then adding an item to the menu
+ * would mean editing twenty files, and nineteen of them would eventually be missed.
+ */ /** The brand mark, shared by the topbar and the sidebar header. */ function logo(id) {
+    return elements.externalComponent(id, ComponentName.ComponentName.Logo, {
+        label: 'Contoso',
+        initials: 'C',
+        targetScreen: 'Dashboard'
+    });
+}
+/** One menu section per navigation group, each holding that group's entries. */ function menuSections(activeScreen) {
+    return navigation.navigationGroups.map((group)=>elements.externalComponent(`menu-${group.toLowerCase()}`, ComponentName.ComponentName.Menu, {
+            title: group,
+            label: group
+        }, {
+            items: navigation.entriesInGroup(group).map((entry)=>navigation.navigationElement(entry, activeScreen))
+        }));
+}
+/** The configurator, offering the themes this blueprint ships. */ function configPanel() {
+    return elements.externalComponent(ComponentName.ComponentName.ConfigPanel, ComponentName.ComponentName.ConfigPanel, {
+        title: 'Settings',
+        themes: defaultBlueprintThemes.defaultBlueprintThemes.map((theme)=>({
+                name: theme.name,
+                label: theme.name,
+                isDark: theme.isDark ?? false
+            }))
+    });
+}
+/**
+ * The application shell's slot content for one screen.
+ *
+ * Only the breadcrumb and which menu entry is marked active differ from screen to screen - everything else
+ * is identical, which is the point of chrome.
+ *
+ * @param activeScreen The screen being rendered, so its menu entry is marked current.
+ * @param breadcrumb The trail above the content.
+ * @returns Slot content keyed by the {@link SlotName}s the `AppShell` layout declares.
+ */ function applicationChrome(activeScreen, breadcrumb) {
+    return {
+        [SlotName.SlotName.Topbar]: [
+            elements.externalComponent('topbar', ComponentName.ComponentName.Topbar, {}, {
+                logo: [
+                    logo('topbar-logo')
+                ],
+                end: [
+                    elements.externalComponent('topbar-user', ComponentName.ComponentName.UserMenu, {
+                        name: 'Amelia Nyquist',
+                        role: 'Owner',
+                        initials: 'AN',
+                        items: [
+                            {
+                                label: 'Your profile',
+                                icon: 'pi pi-user',
+                                targetScreen: 'ProfileSettings'
+                            },
+                            {
+                                label: 'Help',
+                                icon: 'pi pi-question-circle',
+                                targetScreen: 'Help'
+                            },
+                            {
+                                label: 'Lock',
+                                icon: 'pi pi-lock',
+                                targetScreen: 'LockScreen'
+                            }
+                        ]
+                    })
+                ]
+            })
+        ],
+        [SlotName.SlotName.Sidebar]: [
+            elements.externalComponent('sidebar', ComponentName.ComponentName.Sidebar, {
+                title: 'Contoso'
+            }, {
+                logo: [
+                    logo('sidebar-logo')
+                ]
+            })
+        ],
+        [SlotName.SlotName.Menu]: menuSections(activeScreen),
+        [SlotName.SlotName.Breadcrumb]: [
+            elements.externalComponent('breadcrumb', ComponentName.ComponentName.Breadcrumb, {
+                homeTargetScreen: 'Dashboard',
+                items: breadcrumb
+            })
+        ],
+        [SlotName.SlotName.Footer]: [
+            elements.externalComponent('footer', ComponentName.ComponentName.Footer, {
+                text: '© Contoso · Built with Cratis Scene'
+            })
+        ],
+        [SlotName.SlotName.ConfigPanel]: [
+            configPanel()
+        ]
+    };
+}
+/**
+ * The full-page shell's slot content: the configurator and nothing else.
+ *
+ * A sign-in screen has no navigation to render, but it does have to honor the chosen theme - it is very
+ * often the first page anyone sees, and arriving at a light sign-in page before a dark application is a
+ * jarring way to start.
+ */ function fullPageChrome() {
+    return {
+        [SlotName.SlotName.ConfigPanel]: [
+            configPanel()
+        ]
+    };
+}
+
+exports.applicationChrome = applicationChrome;
+exports.fullPageChrome = fullPageChrome;
+//# sourceMappingURL=applicationChrome.js.map

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

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

package/dist/cjs/gallery/authTemplates.js

@@ -0,0 +1,234 @@
+'use strict';
+
+var ComponentName = require('../ComponentName.js');
+var SlotName = require('../layouts/SlotName.js');
+require('@cratis/scene.model');
+require('../layouts/shellComponents.js');
+require('../layouts/appShell.js');
+require('../layouts/fullPage.js');
+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 six screens that stand between someone and the application: sign in, register, forgotten password,
+ * new password, verification and the lock screen.
+ *
+ * All six fit the full-page layout's `content` slot and fill its `aside` with the branding half. That
+ * split - a colored panel of brand next to a narrow column of form - is the shape the premium PrimeTek
+ * templates use for every one of them, and the reason it works is that it gives the form somewhere to be
+ * *small*, which is what a sign-in form should be.
+ */ /** The branding half every authentication screen shares. */ function brandingAside(id, headline, supporting) {
+    return [
+        elements.externalComponent(`${id}-logo`, ComponentName.ComponentName.Logo, {
+            label: 'Contoso',
+            initials: 'C'
+        }),
+        elements.text(`${id}-headline`, headline),
+        elements.text(`${id}-supporting`, supporting)
+    ];
+}
+/** Sign in. */ const loginTemplate = {
+    name: 'Login',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('login', 'Welcome back', 'Everything your team shipped since you were last here is waiting.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('login-card', [
+                elements.text('login-title', 'Sign in'),
+                widgets.field('login-email', 'Email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                widgets.field('login-password', 'Password', 'password', {
+                    feedback: false
+                }),
+                widgets.field('login-remember', 'Keep me signed in', 'checkbox', {}),
+                widgets.formActions('login-actions', 'Sign in', 'Use a different account'),
+                elements.button('login-forgot', 'I forgot my password', {
+                    link: true,
+                    targetScreen: 'ForgotPassword'
+                })
+            ])
+        ]
+    },
+    displayName: 'Sign in',
+    description: 'Email and password beside the branding panel.'
+};
+/** Register. */ const registerTemplate = {
+    name: 'Register',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('register', 'Start in two minutes', 'No card, no call, no sales engineer. Just an account.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('register-card', [
+                elements.text('register-title', 'Create your account'),
+                widgets.field('register-name', 'Full name', 'inputText', {}),
+                widgets.field('register-email', 'Work email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                widgets.field('register-password', 'Password', 'password', {
+                    feedback: true
+                }),
+                widgets.field('register-terms', 'I accept the terms of service', 'checkbox', {}),
+                widgets.formActions('register-actions', 'Create account', 'I already have one')
+            ])
+        ]
+    },
+    displayName: 'Register',
+    description: 'Account creation with a password strength meter and the terms checkbox.'
+};
+/** Forgotten password: ask for the address. */ const forgotPasswordTemplate = {
+    name: 'ForgotPassword',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('forgot', 'It happens', 'Tell us the address you signed up with and we will send a link.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('forgot-card', [
+                elements.text('forgot-title', 'Reset your password'),
+                widgets.field('forgot-email', 'Email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                widgets.formActions('forgot-actions', 'Send the link', 'Back to sign in')
+            ])
+        ]
+    },
+    displayName: 'Forgotten password',
+    description: 'One field and one button - the whole point is that it asks for nothing else.'
+};
+/** New password: the other end of the link. */ const newPasswordTemplate = {
+    name: 'NewPassword',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('new-password', 'Almost there', 'Choose something you have not used anywhere else.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('new-password-card', [
+                elements.text('new-password-title', 'Choose a new password'),
+                widgets.field('new-password-value', 'New password', 'password', {
+                    feedback: true
+                }),
+                widgets.field('new-password-confirm', 'Confirm it', 'password', {
+                    feedback: false
+                }),
+                widgets.formActions('new-password-actions', 'Set the password', 'Cancel')
+            ])
+        ]
+    },
+    displayName: 'New password',
+    description: 'Where a reset link lands: choose it, confirm it, done.'
+};
+/** Verification: the code from the email. */ const verificationTemplate = {
+    name: 'Verification',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('verification', 'Check your email', 'We sent a six-digit code. It expires in ten minutes.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('verification-card', [
+                elements.text('verification-title', 'Enter the code'),
+                elements.externalComponent('verification-steps', 'steps', {
+                    model: [
+                        'Account',
+                        'Verify',
+                        'Done'
+                    ],
+                    activeIndex: 1
+                }),
+                widgets.field('verification-code', 'Six-digit code', 'inputText', {
+                    maxLength: 6
+                }),
+                widgets.formActions('verification-actions', 'Verify', 'Send it again')
+            ])
+        ]
+    },
+    displayName: 'Verification',
+    description: 'The code step, with the progress indicator that tells you how much is left.'
+};
+/** Lock screen: the session is still there, the person has to prove they are. */ const lockScreenTemplate = {
+    name: 'LockScreen',
+    fitsSlot: SlotName.SlotName.Content,
+    slots: [
+        {
+            name: SlotName.SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.SlotName.Aside]: brandingAside('lock', 'Locked', 'Your work is exactly where you left it.'),
+        [TemplateSlotName.TemplateSlotName.Body]: [
+            elements.card('lock-card', [
+                elements.externalComponent('lock-avatar', 'avatar', {
+                    label: 'AN',
+                    size: 'xlarge',
+                    shape: 'circle'
+                }),
+                elements.text('lock-name', 'Amelia Nyquist'),
+                widgets.field('lock-password', 'Password', 'password', {
+                    feedback: false
+                }),
+                widgets.formActions('lock-actions', 'Unlock', 'Sign in as someone else')
+            ])
+        ]
+    },
+    displayName: 'Lock screen',
+    description: 'One person, one password, and no way to lose what was open.'
+};
+/** The six authentication templates. */ const authTemplates = [
+    loginTemplate,
+    registerTemplate,
+    forgotPasswordTemplate,
+    newPasswordTemplate,
+    verificationTemplate,
+    lockScreenTemplate
+];
+
+exports.authTemplates = authTemplates;
+exports.forgotPasswordTemplate = forgotPasswordTemplate;
+exports.lockScreenTemplate = lockScreenTemplate;
+exports.loginTemplate = loginTemplate;
+exports.newPasswordTemplate = newPasswordTemplate;
+exports.registerTemplate = registerTemplate;
+exports.verificationTemplate = verificationTemplate;
+//# sourceMappingURL=authTemplates.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"authTemplates.js","sources":["../../../gallery/authTemplates.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 } from '@cratis/scene.model';\nimport { ComponentName } from '../ComponentName';\nimport { SlotName } from '../layouts';\nimport { TemplateSlotName } from './TemplateSlotName';\nimport { button, card, externalComponent, text } from './elements';\nimport { field, formActions } from './widgets';\n\n/**\n * The six screens that stand between someone and the application: sign in, register, forgotten password,\n * new password, verification and the lock screen.\n *\n * All six fit the full-page layout's `content` slot and fill its `aside` with the branding half. That\n * split - a colored panel of brand next to a narrow column of form - is the shape the premium PrimeTek\n * templates use for every one of them, and the reason it works is that it gives the form somewhere to be\n * *small*, which is what a sign-in form should be.\n */\n\n/** The branding half every authentication screen shares. */\nfunction brandingAside(id: string, headline: string, supporting: string) {\n    return [\n        externalComponent(`${id}-logo`, ComponentName.Logo, { label: 'Contoso', initials: 'C' }),\n        text(`${id}-headline`, headline),\n        text(`${id}-supporting`, supporting),\n    ];\n}\n\n/** Sign in. */\nexport const loginTemplate: ScreenTemplate = {\n    name: 'Login',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('login', 'Welcome back', 'Everything your team shipped since you were last here is waiting.'),\n        [TemplateSlotName.Body]: [\n            card('login-card', [\n                text('login-title', 'Sign in'),\n                field('login-email', 'Email', 'inputText', { placeholder: 'you@contoso.com' }),\n                field('login-password', 'Password', 'password', { feedback: false }),\n                field('login-remember', 'Keep me signed in', 'checkbox', {}),\n                formActions('login-actions', 'Sign in', 'Use a different account'),\n                button('login-forgot', 'I forgot my password', { link: true, targetScreen: 'ForgotPassword' }),\n            ]),\n        ],\n    },\n    displayName: 'Sign in',\n    description: 'Email and password beside the branding panel.',\n};\n\n/** Register. */\nexport const registerTemplate: ScreenTemplate = {\n    name: 'Register',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('register', 'Start in two minutes', 'No card, no call, no sales engineer. Just an account.'),\n        [TemplateSlotName.Body]: [\n            card('register-card', [\n                text('register-title', 'Create your account'),\n                field('register-name', 'Full name', 'inputText', {}),\n                field('register-email', 'Work email', 'inputText', { placeholder: 'you@contoso.com' }),\n                field('register-password', 'Password', 'password', { feedback: true }),\n                field('register-terms', 'I accept the terms of service', 'checkbox', {}),\n                formActions('register-actions', 'Create account', 'I already have one'),\n            ]),\n        ],\n    },\n    displayName: 'Register',\n    description: 'Account creation with a password strength meter and the terms checkbox.',\n};\n\n/** Forgotten password: ask for the address. */\nexport const forgotPasswordTemplate: ScreenTemplate = {\n    name: 'ForgotPassword',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('forgot', 'It happens', 'Tell us the address you signed up with and we will send a link.'),\n        [TemplateSlotName.Body]: [\n            card('forgot-card', [\n                text('forgot-title', 'Reset your password'),\n                field('forgot-email', 'Email', 'inputText', { placeholder: 'you@contoso.com' }),\n                formActions('forgot-actions', 'Send the link', 'Back to sign in'),\n            ]),\n        ],\n    },\n    displayName: 'Forgotten password',\n    description: 'One field and one button - the whole point is that it asks for nothing else.',\n};\n\n/** New password: the other end of the link. */\nexport const newPasswordTemplate: ScreenTemplate = {\n    name: 'NewPassword',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('new-password', 'Almost there', 'Choose something you have not used anywhere else.'),\n        [TemplateSlotName.Body]: [\n            card('new-password-card', [\n                text('new-password-title', 'Choose a new password'),\n                field('new-password-value', 'New password', 'password', { feedback: true }),\n                field('new-password-confirm', 'Confirm it', 'password', { feedback: false }),\n                formActions('new-password-actions', 'Set the password', 'Cancel'),\n            ]),\n        ],\n    },\n    displayName: 'New password',\n    description: 'Where a reset link lands: choose it, confirm it, done.',\n};\n\n/** Verification: the code from the email. */\nexport const verificationTemplate: ScreenTemplate = {\n    name: 'Verification',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('verification', 'Check your email', 'We sent a six-digit code. It expires in ten minutes.'),\n        [TemplateSlotName.Body]: [\n            card('verification-card', [\n                text('verification-title', 'Enter the code'),\n                externalComponent('verification-steps', 'steps', { model: ['Account', 'Verify', 'Done'], activeIndex: 1 }),\n                field('verification-code', 'Six-digit code', 'inputText', { maxLength: 6 }),\n                formActions('verification-actions', 'Verify', 'Send it again'),\n            ]),\n        ],\n    },\n    displayName: 'Verification',\n    description: 'The code step, with the progress indicator that tells you how much is left.',\n};\n\n/** Lock screen: the session is still there, the person has to prove they are. */\nexport const lockScreenTemplate: ScreenTemplate = {\n    name: 'LockScreen',\n    fitsSlot: SlotName.Content,\n    slots: [{ name: SlotName.Aside }, { name: TemplateSlotName.Body }],\n    content: {\n        [SlotName.Aside]: brandingAside('lock', 'Locked', 'Your work is exactly where you left it.'),\n        [TemplateSlotName.Body]: [\n            card('lock-card', [\n                externalComponent('lock-avatar', 'avatar', { label: 'AN', size: 'xlarge', shape: 'circle' }),\n                text('lock-name', 'Amelia Nyquist'),\n                field('lock-password', 'Password', 'password', { feedback: false }),\n                formActions('lock-actions', 'Unlock', 'Sign in as someone else'),\n            ]),\n        ],\n    },\n    displayName: 'Lock screen',\n    description: 'One person, one password, and no way to lose what was open.',\n};\n\n/** The six authentication templates. */\nexport const authTemplates: ScreenTemplate[] = [\n    loginTemplate,\n    registerTemplate,\n    forgotPasswordTemplate,\n    newPasswordTemplate,\n    verificationTemplate,\n    lockScreenTemplate,\n];\n"],"names":["brandingAside","id","headline","supporting","externalComponent","ComponentName","Logo","label","initials","text","loginTemplate","name","fitsSlot","SlotName","Content","slots","Aside","TemplateSlotName","Body","content","card","field","placeholder","feedback","formActions","button","link","targetScreen","displayName","description","registerTemplate","forgotPasswordTemplate","newPasswordTemplate","verificationTemplate","model","activeIndex","maxLength","lockScreenTemplate","size","shape","authTemplates"],"mappings":"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"}

package/dist/cjs/gallery/componentNames.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var scene_engine = require('@cratis/scene.engine');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Every component name an element tree references.
+ *
+ * A blueprint's templates name components the blueprint itself does not provide - the widgets come from
+ * the component libraries it depends on - and a name no active package declares renders as a dashed red
+ * placeholder somewhere inside a screen, with nothing pointing back at the template that wrote it.
+ * Collecting the names up front is what lets that be a failed check at build or design time instead.
+ *
+ * The walk uses the engine's own kind guards rather than its own, so it visits exactly the branches the
+ * renderer visits and cannot drift from it.
+ *
+ * @param element The root to walk.
+ * @returns Every `componentName` found, in encounter order, with duplicates.
+ */ function componentNamesIn(element) {
+    const names = [];
+    if (scene_engine.isExternalComponent(element)) {
+        names.push(element.componentName);
+        for (const children of Object.values(element.slots)){
+            for (const child of children){
+                names.push(...componentNamesIn(child));
+            }
+        }
+    }
+    if (scene_engine.isContentControl(element)) {
+        names.push(...componentNamesIn(element.content));
+    }
+    if (scene_engine.isItemsControl(element)) {
+        names.push(...componentNamesIn(element.itemTemplate));
+    }
+    if (scene_engine.isPanel(element)) {
+        for (const child of element.children){
+            names.push(...componentNamesIn(child));
+        }
+    }
+    return names;
+}
+/**
+ * Every distinct component name a set of element trees references, sorted so a report of them is stable.
+ */ function distinctComponentNames(elements) {
+    return [
+        ...new Set(elements.flatMap(componentNamesIn))
+    ].sort();
+}
+
+exports.componentNamesIn = componentNamesIn;
+exports.distinctComponentNames = distinctComponentNames;
+//# sourceMappingURL=componentNames.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentNames.js","sources":["../../../gallery/componentNames.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { SceneElement } from '@cratis/scene.model';\nimport { isContentControl, isExternalComponent, isItemsControl, isPanel } from '@cratis/scene.engine';\n\n/**\n * Every component name an element tree references.\n *\n * A blueprint's templates name components the blueprint itself does not provide - the widgets come from\n * the component libraries it depends on - and a name no active package declares renders as a dashed red\n * placeholder somewhere inside a screen, with nothing pointing back at the template that wrote it.\n * Collecting the names up front is what lets that be a failed check at build or design time instead.\n *\n * The walk uses the engine's own kind guards rather than its own, so it visits exactly the branches the\n * renderer visits and cannot drift from it.\n *\n * @param element The root to walk.\n * @returns Every `componentName` found, in encounter order, with duplicates.\n */\nexport function componentNamesIn(element: SceneElement): string[] {\n    const names: string[] = [];\n\n    if (isExternalComponent(element)) {\n        names.push(element.componentName);\n        for (const children of Object.values(element.slots)) {\n            for (const child of children) {\n                names.push(...componentNamesIn(child));\n            }\n        }\n    }\n\n    if (isContentControl(element)) {\n        names.push(...componentNamesIn(element.content));\n    }\n\n    if (isItemsControl(element)) {\n        names.push(...componentNamesIn(element.itemTemplate));\n    }\n\n    if (isPanel(element)) {\n        for (const child of element.children) {\n            names.push(...componentNamesIn(child));\n        }\n    }\n\n    return names;\n}\n\n/**\n * Every distinct component name a set of element trees references, sorted so a report of them is stable.\n */\nexport function distinctComponentNames(elements: SceneElement[]): string[] {\n    return [...new Set(elements.flatMap(componentNamesIn))].sort();\n}\n"],"names":["componentNamesIn","element","names","isExternalComponent","push","componentName","children","Object","values","slots","child","isContentControl","content","isItemsControl","itemTemplate","isPanel","distinctComponentNames","elements","Set","flatMap","sort"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;;;;;;;IAcO,SAASA,gBAAAA,CAAiBC,OAAqB,EAAA;AAClD,IAAA,MAAMC,QAAkB,EAAE;AAE1B,IAAA,IAAIC,iCAAoBF,OAAAA,CAAAA,EAAU;QAC9BC,KAAAA,CAAME,IAAI,CAACH,OAAAA,CAAQI,aAAa,CAAA;AAChC,QAAA,KAAK,MAAMC,QAAAA,IAAYC,MAAAA,CAAOC,MAAM,CAACP,OAAAA,CAAQQ,KAAK,CAAA,CAAG;YACjD,KAAK,MAAMC,SAASJ,QAAAA,CAAU;gBAC1BJ,KAAAA,CAAME,IAAI,IAAIJ,gBAAAA,CAAiBU,KAAAA,CAAAA,CAAAA;AACnC,YAAA;AACJ,QAAA;AACJ,IAAA;AAEA,IAAA,IAAIC,8BAAiBV,OAAAA,CAAAA,EAAU;AAC3BC,QAAAA,KAAAA,CAAME,IAAI,CAAA,GAAIJ,gBAAAA,CAAiBC,OAAAA,CAAQW,OAAO,CAAA,CAAA;AAClD,IAAA;AAEA,IAAA,IAAIC,4BAAeZ,OAAAA,CAAAA,EAAU;AACzBC,QAAAA,KAAAA,CAAME,IAAI,CAAA,GAAIJ,gBAAAA,CAAiBC,OAAAA,CAAQa,YAAY,CAAA,CAAA;AACvD,IAAA;AAEA,IAAA,IAAIC,qBAAQd,OAAAA,CAAAA,EAAU;AAClB,QAAA,KAAK,MAAMS,KAAAA,IAAST,OAAAA,CAAQK,QAAQ,CAAE;YAClCJ,KAAAA,CAAME,IAAI,IAAIJ,gBAAAA,CAAiBU,KAAAA,CAAAA,CAAAA;AACnC,QAAA;AACJ,IAAA;IAEA,OAAOR,KAAAA;AACX;AAEA;;IAGO,SAASc,sBAAAA,CAAuBC,QAAwB,EAAA;IAC3D,OAAO;WAAI,IAAIC,GAAAA,CAAID,QAAAA,CAASE,OAAO,CAACnB,gBAAAA,CAAAA;AAAmB,KAAA,CAACoB,IAAI,EAAA;AAChE;;;;;"}