@cratis/scene.blueprint.default 0.1.0

package/dist/esm/gallery/applicationChrome.js

@@ -0,0 +1,131 @@
+import { ComponentName } from '../ComponentName.js';
+import { SlotName } from '../layouts/SlotName.js';
+import '@cratis/scene.model';
+import '../layouts/shellComponents.js';
+import '../layouts/appShell.js';
+import '../layouts/fullPage.js';
+import { defaultBlueprintThemes } from '../themes/defaultBlueprintThemes.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@cratis/scene.react';
+import { externalComponent } from './elements.js';
+import { navigationGroups, entriesInGroup, navigationElement } from './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 externalComponent(id, ComponentName.Logo, {
+        label: 'Contoso',
+        initials: 'C',
+        targetScreen: 'Dashboard'
+    });
+}
+/** One menu section per navigation group, each holding that group's entries. */ function menuSections(activeScreen) {
+    return navigationGroups.map((group)=>externalComponent(`menu-${group.toLowerCase()}`, ComponentName.Menu, {
+            title: group,
+            label: group
+        }, {
+            items: entriesInGroup(group).map((entry)=>navigationElement(entry, activeScreen))
+        }));
+}
+/** The configurator, offering the themes this blueprint ships. */ function configPanel() {
+    return externalComponent(ComponentName.ConfigPanel, ComponentName.ConfigPanel, {
+        title: 'Settings',
+        themes: 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.Topbar]: [
+            externalComponent('topbar', ComponentName.Topbar, {}, {
+                logo: [
+                    logo('topbar-logo')
+                ],
+                end: [
+                    externalComponent('topbar-user', 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.Sidebar]: [
+            externalComponent('sidebar', ComponentName.Sidebar, {
+                title: 'Contoso'
+            }, {
+                logo: [
+                    logo('sidebar-logo')
+                ]
+            })
+        ],
+        [SlotName.Menu]: menuSections(activeScreen),
+        [SlotName.Breadcrumb]: [
+            externalComponent('breadcrumb', ComponentName.Breadcrumb, {
+                homeTargetScreen: 'Dashboard',
+                items: breadcrumb
+            })
+        ],
+        [SlotName.Footer]: [
+            externalComponent('footer', ComponentName.Footer, {
+                text: '© Contoso · Built with Cratis Scene'
+            })
+        ],
+        [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.ConfigPanel]: [
+            configPanel()
+        ]
+    };
+}
+
+export { applicationChrome, fullPageChrome };
+//# sourceMappingURL=applicationChrome.js.map

package/dist/esm/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/esm/gallery/authTemplates.d.ts

@@ -0,0 +1,9 @@
+import { ScreenTemplate } from '@cratis/scene.model';
+export declare const loginTemplate: ScreenTemplate;
+export declare const registerTemplate: ScreenTemplate;
+export declare const forgotPasswordTemplate: ScreenTemplate;
+export declare const newPasswordTemplate: ScreenTemplate;
+export declare const verificationTemplate: ScreenTemplate;
+export declare const lockScreenTemplate: ScreenTemplate;
+export declare const authTemplates: ScreenTemplate[];
+//# sourceMappingURL=authTemplates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"authTemplates.d.ts","sourceRoot":"","sources":["../../../gallery/authTemplates.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA2BrD,eAAO,MAAM,aAAa,EAAE,cAmB3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,cAmB9B,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,cAgBpC,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,cAiBjC,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,cAiBlC,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,cAiBhC,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,cAAc,EAOzC,CAAC"}

package/dist/esm/gallery/authTemplates.js

@@ -0,0 +1,226 @@
+import { ComponentName } from '../ComponentName.js';
+import { SlotName } from '../layouts/SlotName.js';
+import '@cratis/scene.model';
+import '../layouts/shellComponents.js';
+import '../layouts/appShell.js';
+import '../layouts/fullPage.js';
+import { TemplateSlotName } from './TemplateSlotName.js';
+import { card, text, button, externalComponent } from './elements.js';
+import { field, formActions } from './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 [
+        externalComponent(`${id}-logo`, ComponentName.Logo, {
+            label: 'Contoso',
+            initials: 'C'
+        }),
+        text(`${id}-headline`, headline),
+        text(`${id}-supporting`, supporting)
+    ];
+}
+/** Sign in. */ const loginTemplate = {
+    name: 'Login',
+    fitsSlot: SlotName.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('login', 'Welcome back', 'Everything your team shipped since you were last here is waiting.'),
+        [TemplateSlotName.Body]: [
+            card('login-card', [
+                text('login-title', 'Sign in'),
+                field('login-email', 'Email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                field('login-password', 'Password', 'password', {
+                    feedback: false
+                }),
+                field('login-remember', 'Keep me signed in', 'checkbox', {}),
+                formActions('login-actions', 'Sign in', 'Use a different account'),
+                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.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('register', 'Start in two minutes', 'No card, no call, no sales engineer. Just an account.'),
+        [TemplateSlotName.Body]: [
+            card('register-card', [
+                text('register-title', 'Create your account'),
+                field('register-name', 'Full name', 'inputText', {}),
+                field('register-email', 'Work email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                field('register-password', 'Password', 'password', {
+                    feedback: true
+                }),
+                field('register-terms', 'I accept the terms of service', 'checkbox', {}),
+                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.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('forgot', 'It happens', 'Tell us the address you signed up with and we will send a link.'),
+        [TemplateSlotName.Body]: [
+            card('forgot-card', [
+                text('forgot-title', 'Reset your password'),
+                field('forgot-email', 'Email', 'inputText', {
+                    placeholder: 'you@contoso.com'
+                }),
+                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.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('new-password', 'Almost there', 'Choose something you have not used anywhere else.'),
+        [TemplateSlotName.Body]: [
+            card('new-password-card', [
+                text('new-password-title', 'Choose a new password'),
+                field('new-password-value', 'New password', 'password', {
+                    feedback: true
+                }),
+                field('new-password-confirm', 'Confirm it', 'password', {
+                    feedback: false
+                }),
+                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.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('verification', 'Check your email', 'We sent a six-digit code. It expires in ten minutes.'),
+        [TemplateSlotName.Body]: [
+            card('verification-card', [
+                text('verification-title', 'Enter the code'),
+                externalComponent('verification-steps', 'steps', {
+                    model: [
+                        'Account',
+                        'Verify',
+                        'Done'
+                    ],
+                    activeIndex: 1
+                }),
+                field('verification-code', 'Six-digit code', 'inputText', {
+                    maxLength: 6
+                }),
+                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.Content,
+    slots: [
+        {
+            name: SlotName.Aside
+        },
+        {
+            name: TemplateSlotName.Body
+        }
+    ],
+    content: {
+        [SlotName.Aside]: brandingAside('lock', 'Locked', 'Your work is exactly where you left it.'),
+        [TemplateSlotName.Body]: [
+            card('lock-card', [
+                externalComponent('lock-avatar', 'avatar', {
+                    label: 'AN',
+                    size: 'xlarge',
+                    shape: 'circle'
+                }),
+                text('lock-name', 'Amelia Nyquist'),
+                field('lock-password', 'Password', 'password', {
+                    feedback: false
+                }),
+                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
+];
+
+export { authTemplates, forgotPasswordTemplate, lockScreenTemplate, loginTemplate, newPasswordTemplate, registerTemplate, verificationTemplate };
+//# sourceMappingURL=authTemplates.js.map

package/dist/esm/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/esm/gallery/componentNames.d.ts

@@ -0,0 +1,4 @@
+import { SceneElement } from '@cratis/scene.model';
+export declare function componentNamesIn(element: SceneElement): string[];
+export declare function distinctComponentNames(elements: SceneElement[]): string[];
+//# sourceMappingURL=componentNames.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentNames.d.ts","sourceRoot":"","sources":["../../../gallery/componentNames.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAiBnD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,EAAE,CA2BhE;AAKD,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAEzE"}

package/dist/esm/gallery/componentNames.js

@@ -0,0 +1,50 @@
+import { isExternalComponent, isContentControl, isItemsControl, isPanel } from '@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 (isExternalComponent(element)) {
+        names.push(element.componentName);
+        for (const children of Object.values(element.slots)){
+            for (const child of children){
+                names.push(...componentNamesIn(child));
+            }
+        }
+    }
+    if (isContentControl(element)) {
+        names.push(...componentNamesIn(element.content));
+    }
+    if (isItemsControl(element)) {
+        names.push(...componentNamesIn(element.itemTemplate));
+    }
+    if (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();
+}
+
+export { componentNamesIn, distinctComponentNames };
+//# sourceMappingURL=componentNames.js.map

package/dist/esm/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,oBAAoBF,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,iBAAiBV,OAAAA,CAAAA,EAAU;AAC3BC,QAAAA,KAAAA,CAAME,IAAI,CAAA,GAAIJ,gBAAAA,CAAiBC,OAAAA,CAAQW,OAAO,CAAA,CAAA;AAClD,IAAA;AAEA,IAAA,IAAIC,eAAeZ,OAAAA,CAAAA,EAAU;AACzBC,QAAAA,KAAAA,CAAME,IAAI,CAAA,GAAIJ,gBAAAA,CAAiBC,OAAAA,CAAQa,YAAY,CAAA,CAAA;AACvD,IAAA;AAEA,IAAA,IAAIC,QAAQd,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;;;;"}

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

@@ -0,0 +1,5 @@
+import { ExternalComponent, Layout, SceneElement, Screen, ScreenTemplate } from '@cratis/scene.model';
+export declare function templateContentInLayout(template: ScreenTemplate, layout: Layout): Record<string, SceneElement[]>;
+export declare function nestScreenTemplates(chain: ScreenTemplate[]): ScreenTemplate;
+export declare function composeScreenElement(screen: Screen): ExternalComponent;
+//# sourceMappingURL=composeScreen.d.ts.map

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

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

package/dist/esm/gallery/composeScreen.js

@@ -0,0 +1,95 @@
+import '@cratis/scene.model';
+import { shellComponentForLayout } from '../layouts/shellComponents.js';
+import '../layouts/appShell.js';
+import '../layouts/fullPage.js';
+import { externalComponent } from './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 = shellComponentForLayout(screen.layout);
+    if (!shell) {
+        throw new Error(`Screen '${screen.name}' names the layout '${screen.layout}', which this blueprint does not provide.`);
+    }
+    return externalComponent(`screen-${screen.name}`, shell, {
+        screenName: screen.name
+    }, screen.slotContent);
+}
+
+export { composeScreenElement, nestScreenTemplates, templateContentInLayout };
+//# sourceMappingURL=composeScreen.js.map

package/dist/esm/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,uBAAAA,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,iBAAAA,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/esm/gallery/dependencyComponentNames.d.ts

@@ -0,0 +1,4 @@
+export declare const primeReactComponentNames: string[];
+export declare const cratisComponentsNames: string[];
+export declare const coreComponentNames: string[];
+//# sourceMappingURL=dependencyComponentNames.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dependencyComponentNames.d.ts","sourceRoot":"","sources":["../../../gallery/dependencyComponentNames.ts"],"names":[],"mappings":"AA6BA,eAAO,MAAM,wBAAwB,EAAE,MAAM,EAsB5C,CAAC;AASF,eAAO,MAAM,qBAAqB,EAAE,MAAM,EAAmE,CAAC;AAG9G,eAAO,MAAM,kBAAkB,EAAE,MAAM,EAA+B,CAAC"}