@cratis/scene.blueprint.default 0.1.0

package/dist/cjs/layouts/fullPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullPage.js","sources":["../../../layouts/fullPage.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 { FlowArrangement, Layout, WidthSizeClass } from '@cratis/scene.model';\nimport { LayoutName } from './LayoutName';\nimport { SlotName } from './SlotName';\nimport { column, row, slotLeaf } from './flowBuilders';\n\n/**\n * The tree at a regular width: the branding aside beside the content, with the configurator over both.\n *\n * The split is the shape every premium PrimeTek sign-in page uses - a colored branding half and a form\n * half - and it is the reason `aside` is a slot rather than something a screen paints inside `content`.\n */\nexport const fullPageRegularRoot = column([row([slotLeaf(SlotName.Aside), slotLeaf(SlotName.Content, { grow: 1 })], 0, { grow: 1 }), slotLeaf(SlotName.ConfigPanel)]);\n\n/**\n * The tree at a compact width: the branding aside leaves the flow.\n *\n * On a phone the aside would take 40% of the width from the only thing that matters on a sign-in screen,\n * which is the form. It drops out rather than stacking above it, because a sign-in form pushed below the\n * fold by decoration is the worst possible first screen.\n */\nexport const fullPageCompactWidthRoot = column([slotLeaf(SlotName.Content, { grow: 1 }), slotLeaf(SlotName.ConfigPanel)]);\n\n/** The arrangement of the {@link fullPageLayout}'s own slots. */\nexport const fullPageArrangement: FlowArrangement = {\n    root: fullPageRegularRoot,\n    overrides: [{ width: WidthSizeClass.Compact, root: fullPageCompactWidthRoot }],\n};\n\n/**\n * The chrome-less layout.\n *\n * Sign-in, register, forgotten password, verification, lock, error, access-denied, not-found and landing\n * screens all use this rather than a stripped-down application shell, and that split is structural in\n * every PrimeTek template for a reason worth repeating: none of those screens has navigation state, a\n * sidebar to remember or a breadcrumb to place, so hanging them off the application shell would mean every\n * one of the eight modes needs an answer for a page with no menu.\n *\n * The configurator stays, because the sign-in page is very often the first page anyone sees and it still\n * has to honor the chosen theme.\n */\nexport const fullPageLayout: Layout = {\n    name: LayoutName.FullPage,\n    slots: [{ name: SlotName.Aside }, { name: SlotName.Content }, { name: SlotName.ConfigPanel }],\n    arrangement: fullPageArrangement,\n};\n"],"names":["fullPageRegularRoot","column","row","slotLeaf","SlotName","Aside","Content","grow","ConfigPanel","fullPageCompactWidthRoot","fullPageArrangement","root","overrides","width","WidthSizeClass","Compact","fullPageLayout","name","LayoutName","FullPage","slots","arrangement"],"mappings":";;;;;;;AAAA;AACA;AAOA;;;;;IAMO,MAAMA,mBAAAA,GAAsBC,mBAAAA,CAAO;IAACC,gBAAAA,CAAI;AAACC,QAAAA,qBAAAA,CAASC,kBAASC,KAAK,CAAA;QAAGF,qBAAAA,CAASC,iBAAAA,CAASE,OAAO,EAAE;YAAEC,IAAAA,EAAM;AAAE,SAAA;AAAG,KAAA,EAAE,CAAA,EAAG;QAAEA,IAAAA,EAAM;AAAE,KAAA,CAAA;AAAIJ,IAAAA,qBAAAA,CAASC,kBAASI,WAAW;CAAE;AAEpK;;;;;;IAOO,MAAMC,wBAAAA,GAA2BR,mBAAAA,CAAO;IAACE,qBAAAA,CAASC,iBAAAA,CAASE,OAAO,EAAE;QAAEC,IAAAA,EAAM;AAAE,KAAA,CAAA;AAAIJ,IAAAA,qBAAAA,CAASC,kBAASI,WAAW;CAAE;AAExH,kEACO,MAAME,mBAAAA,GAAuC;IAChDC,IAAAA,EAAMX,mBAAAA;IACNY,SAAAA,EAAW;AAAC,QAAA;AAAEC,YAAAA,KAAAA,EAAOC,2BAAeC,OAAO;YAAEJ,IAAAA,EAAMF;AAAyB;AAAE;AAClF;AAEA;;;;;;;;;;;UAYaO,cAAAA,GAAyB;AAClCC,IAAAA,IAAAA,EAAMC,sBAAWC,QAAQ;IACzBC,KAAAA,EAAO;AAAC,QAAA;AAAEH,YAAAA,IAAAA,EAAMb,kBAASC;AAAM,SAAA;AAAG,QAAA;AAAEY,YAAAA,IAAAA,EAAMb,kBAASE;AAAQ,SAAA;AAAG,QAAA;AAAEW,YAAAA,IAAAA,EAAMb,kBAASI;AAAY;AAAE,KAAA;IAC7Fa,WAAAA,EAAaX;AACjB;;;;;;;"}

package/dist/cjs/layouts/shellComponents.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var ComponentName = require('../ComponentName.js');
+var LayoutName = require('./LayoutName.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Which component renders which layout.
+ *
+ * A {@link Layout} is data - named slots and an arrangement - and says nothing about how it is drawn. This
+ * is the one place that pairing lives, so a host holding a screen and its layout name can find the shell
+ * to render it in without hardcoding the answer, and a spec can prove every layout the blueprint declares
+ * actually has one.
+ */ const shellComponents = {
+    [LayoutName.LayoutName.AppShell]: ComponentName.ComponentName.AppShell,
+    [LayoutName.LayoutName.FullPage]: ComponentName.ComponentName.FullPageShell
+};
+/**
+ * The component that renders a layout.
+ *
+ * @param layoutName The layout's name.
+ * @returns The bare component name, or `undefined` when the layout is not one of this blueprint's.
+ */ function shellComponentForLayout(layoutName) {
+    return shellComponents[layoutName];
+}
+
+exports.shellComponentForLayout = shellComponentForLayout;
+//# sourceMappingURL=shellComponents.js.map

package/dist/cjs/layouts/shellComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shellComponents.js","sources":["../../../layouts/shellComponents.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 { ComponentName } from '../ComponentName';\nimport { LayoutName } from './LayoutName';\n\n/**\n * Which component renders which layout.\n *\n * A {@link Layout} is data - named slots and an arrangement - and says nothing about how it is drawn. This\n * is the one place that pairing lives, so a host holding a screen and its layout name can find the shell\n * to render it in without hardcoding the answer, and a spec can prove every layout the blueprint declares\n * actually has one.\n */\nconst shellComponents: Record<LayoutName, ComponentName> = {\n    [LayoutName.AppShell]: ComponentName.AppShell,\n    [LayoutName.FullPage]: ComponentName.FullPageShell,\n};\n\n/**\n * The component that renders a layout.\n *\n * @param layoutName The layout's name.\n * @returns The bare component name, or `undefined` when the layout is not one of this blueprint's.\n */\nexport function shellComponentForLayout(layoutName: string): ComponentName | undefined {\n    return shellComponents[layoutName as LayoutName];\n}\n"],"names":["shellComponents","LayoutName","AppShell","ComponentName","FullPage","FullPageShell","shellComponentForLayout","layoutName"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;AAOC,IACD,MAAMA,eAAAA,GAAqD;AACvD,IAAA,CAACC,qBAAAA,CAAWC,QAAQ,GAAGC,4BAAcD,QAAQ;AAC7C,IAAA,CAACD,qBAAAA,CAAWG,QAAQ,GAAGD,4BAAcE;AACzC,CAAA;AAEA;;;;;IAMO,SAASC,uBAAAA,CAAwBC,UAAkB,EAAA;IACtD,OAAOP,eAAe,CAACO,UAAAA,CAAyB;AACpD;;;;"}

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/packageName.js

@@ -0,0 +1,15 @@
+'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 name this blueprint is known by inside a `ui profile`.
+ *
+ * It is not the npm package name: a profile lists Scene package names, a theme declares compatibility
+ * with them, and `componentRegistryKey` builds every registry key from this. It therefore lives on its own
+ * rather than inside the manifest, so the registry can key off it without importing the manifest that
+ * describes the registry.
+ */ const defaultBlueprintName = 'Cratis.Blueprint.Default';
+
+exports.defaultBlueprintName = defaultBlueprintName;
+//# sourceMappingURL=packageName.js.map

package/dist/cjs/packageName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"packageName.js","sources":["../../packageName.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 name this blueprint is known by inside a `ui profile`.\n *\n * It is not the npm package name: a profile lists Scene package names, a theme declares compatibility\n * with them, and `componentRegistryKey` builds every registry key from this. It therefore lives on its own\n * rather than inside the manifest, so the registry can key off it without importing the manifest that\n * describes the registry.\n */\nexport const defaultBlueprintName = 'Cratis.Blueprint.Default';\n"],"names":["defaultBlueprintName"],"mappings":";;AAAA;AACA;AAEA;;;;;;;IAQO,MAAMA,oBAAAA,GAAuB;;;;"}

package/dist/cjs/shell/AppShell.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var layoutConfigTransitions = require('../configuration/layoutConfigTransitions.js');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var SlotName = require('../layouts/SlotName.js');
+require('@cratis/scene.model');
+require('../layouts/shellComponents.js');
+require('../layouts/appShell.js');
+require('../layouts/fullPage.js');
+var Mask = require('./Mask.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The application shell: the `AppShell` layout's slots, positioned.
+ *
+ * This owns the positioned boxes - the fixed topbar, the sliding sidebar panel, the pushed main column -
+ * while the components filling the slots own what goes inside them. Splitting it there is what lets a
+ * screen replace the entire menu without knowing anything about how `reveal` mode translates the panel it
+ * lives in.
+ *
+ * It puts a {@link LayoutConfigProvider} around itself when a host has not, because a gallery preview
+ * hands the renderer one `appShell` element and nothing else, and the shell still has to be able to
+ * switch modes.
+ */ function AppShell({ element, slots }) {
+    const surface = /*#__PURE__*/ jsxRuntime.jsx(AppShellSurface, {
+        elementId: element.id,
+        slots: slots
+    });
+    return LayoutConfigProvider.useOptionalLayoutConfig() ? surface : /*#__PURE__*/ jsxRuntime.jsx(LayoutConfigProvider.LayoutConfigProvider, {
+        children: surface
+    });
+}
+function AppShellSurface({ elementId, slots }) {
+    const { config, effectiveMode, wrapperClasses, setSidebarRevealed } = LayoutConfigProvider.useLayoutConfig();
+    const revealsOnPointer = layoutConfigTransitions.isPointerRevealMode(effectiveMode);
+    const hasSidebar = filled(slots, SlotName.SlotName.Sidebar) || filled(slots, SlotName.SlotName.Menu);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: wrapperClasses.join(' '),
+        "data-scene-id": elementId,
+        "data-layout-mode": config.mode,
+        children: [
+            filled(slots, SlotName.SlotName.Topbar) && /*#__PURE__*/ jsxRuntime.jsx("header", {
+                className: "layout-topbar",
+                children: slots[SlotName.SlotName.Topbar]
+            }),
+            hasSidebar && /*#__PURE__*/ jsxRuntime.jsxs("aside", {
+                className: "layout-sidebar",
+                onMouseEnter: revealsOnPointer ? ()=>setSidebarRevealed(true) : undefined,
+                onMouseLeave: revealsOnPointer ? ()=>setSidebarRevealed(false) : undefined,
+                children: [
+                    slots[SlotName.SlotName.Sidebar],
+                    slots[SlotName.SlotName.Menu]
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "layout-main",
+                children: [
+                    filled(slots, SlotName.SlotName.Breadcrumb) && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "layout-breadcrumb",
+                        children: slots[SlotName.SlotName.Breadcrumb]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("main", {
+                        className: "layout-content",
+                        children: slots[SlotName.SlotName.Content]
+                    }),
+                    filled(slots, SlotName.SlotName.Footer) && /*#__PURE__*/ jsxRuntime.jsx("footer", {
+                        className: "layout-footer",
+                        children: slots[SlotName.SlotName.Footer]
+                    })
+                ]
+            }),
+            filled(slots, SlotName.SlotName.RightPanel) && /*#__PURE__*/ jsxRuntime.jsx("aside", {
+                className: "layout-right-panel",
+                children: slots[SlotName.SlotName.RightPanel]
+            }),
+            slots[SlotName.SlotName.ConfigPanel],
+            /*#__PURE__*/ jsxRuntime.jsx(Mask.LayoutMask, {})
+        ]
+    });
+}
+function filled(slots, name) {
+    return (slots[name]?.length ?? 0) > 0;
+}
+
+exports.AppShell = AppShell;
+//# sourceMappingURL=AppShell.js.map

package/dist/cjs/shell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sources":["../../../shell/AppShell.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 { ReactNode } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { LayoutConfigProvider, isPointerRevealMode, useLayoutConfig, useOptionalLayoutConfig } from '../configuration';\nimport { SlotName } from '../layouts';\nimport { LayoutMask } from './Mask';\n\n/**\n * The application shell: the `AppShell` layout's slots, positioned.\n *\n * This owns the positioned boxes - the fixed topbar, the sliding sidebar panel, the pushed main column -\n * while the components filling the slots own what goes inside them. Splitting it there is what lets a\n * screen replace the entire menu without knowing anything about how `reveal` mode translates the panel it\n * lives in.\n *\n * It puts a {@link LayoutConfigProvider} around itself when a host has not, because a gallery preview\n * hands the renderer one `appShell` element and nothing else, and the shell still has to be able to\n * switch modes.\n */\nexport function AppShell({ element, slots }: RegisteredComponentProps) {\n    const surface = <AppShellSurface elementId={element.id} slots={slots} />;\n    return useOptionalLayoutConfig() ? surface : <LayoutConfigProvider>{surface}</LayoutConfigProvider>;\n}\n\ninterface AppShellSurfaceProps {\n    elementId: string;\n    slots: Record<string, ReactNode[]>;\n}\n\nfunction AppShellSurface({ elementId, slots }: AppShellSurfaceProps) {\n    const { config, effectiveMode, wrapperClasses, setSidebarRevealed } = useLayoutConfig();\n    const revealsOnPointer = isPointerRevealMode(effectiveMode);\n    const hasSidebar = filled(slots, SlotName.Sidebar) || filled(slots, SlotName.Menu);\n\n    return (\n        <div className={wrapperClasses.join(' ')} data-scene-id={elementId} data-layout-mode={config.mode}>\n            {filled(slots, SlotName.Topbar) && <header className='layout-topbar'>{slots[SlotName.Topbar]}</header>}\n\n            {hasSidebar && (\n                <aside\n                    className='layout-sidebar'\n                    onMouseEnter={revealsOnPointer ? () => setSidebarRevealed(true) : undefined}\n                    onMouseLeave={revealsOnPointer ? () => setSidebarRevealed(false) : undefined}>\n                    {slots[SlotName.Sidebar]}\n                    {slots[SlotName.Menu]}\n                </aside>\n            )}\n\n            <div className='layout-main'>\n                {filled(slots, SlotName.Breadcrumb) && <div className='layout-breadcrumb'>{slots[SlotName.Breadcrumb]}</div>}\n                <main className='layout-content'>{slots[SlotName.Content]}</main>\n                {filled(slots, SlotName.Footer) && <footer className='layout-footer'>{slots[SlotName.Footer]}</footer>}\n            </div>\n\n            {filled(slots, SlotName.RightPanel) && <aside className='layout-right-panel'>{slots[SlotName.RightPanel]}</aside>}\n            {slots[SlotName.ConfigPanel]}\n            <LayoutMask />\n        </div>\n    );\n}\n\nfunction filled(slots: Record<string, ReactNode[]>, name: SlotName): boolean {\n    return (slots[name]?.length ?? 0) > 0;\n}\n"],"names":["AppShell","element","slots","surface","_jsx","AppShellSurface","elementId","id","useOptionalLayoutConfig","LayoutConfigProvider","config","effectiveMode","wrapperClasses","setSidebarRevealed","useLayoutConfig","revealsOnPointer","isPointerRevealMode","hasSidebar","filled","SlotName","Sidebar","Menu","_jsxs","div","className","join","data-scene-id","data-layout-mode","mode","Topbar","header","aside","onMouseEnter","undefined","onMouseLeave","Breadcrumb","main","Content","Footer","footer","RightPanel","ConfigPanel","LayoutMask","name","length"],"mappings":"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"}

package/dist/cjs/shell/Breadcrumb.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var breadcrumb = require('primereact/breadcrumb');
+var elementProperties = require('./elementProperties.js');
+
+/**
+ * The trail above the content.
+ *
+ * PrimeReact's own `BreadCrumb` does the rendering rather than hand-written markup, because a breadcrumb
+ * is an ordinary component with no layout-mode behavior at all - it looks the same in every one of the
+ * eight modes. The shell only writes CSS where PrimeReact 10 genuinely has no answer, and this is not one
+ * of those places.
+ */ function Breadcrumb({ element }) {
+    const home = elementProperties.readOptionalString(element, 'homeTargetScreen');
+    const model = elementProperties.readRecords(element, 'items').map((item)=>({
+            label: elementProperties.recordString(item, 'label'),
+            url: elementProperties.recordString(item, 'targetScreen') ? `#/${elementProperties.recordString(item, 'targetScreen')}` : undefined
+        }));
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-scene-id": element.id,
+        children: /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.BreadCrumb, {
+            model: model,
+            home: home ? {
+                icon: 'pi pi-home',
+                url: `#/${home}`
+            } : undefined
+        })
+    });
+}
+
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/cjs/shell/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../shell/Breadcrumb.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 { BreadCrumb } from 'primereact/breadcrumb';\nimport { MenuItem as PrimeMenuItem } from 'primereact/menuitem';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readOptionalString, readRecords, recordString } from './elementProperties';\n\n/**\n * The trail above the content.\n *\n * PrimeReact's own `BreadCrumb` does the rendering rather than hand-written markup, because a breadcrumb\n * is an ordinary component with no layout-mode behavior at all - it looks the same in every one of the\n * eight modes. The shell only writes CSS where PrimeReact 10 genuinely has no answer, and this is not one\n * of those places.\n */\nexport function Breadcrumb({ element }: RegisteredComponentProps) {\n    const home = readOptionalString(element, 'homeTargetScreen');\n    const model = readRecords(element, 'items').map(\n        (item): PrimeMenuItem => ({\n            label: recordString(item, 'label'),\n            url: recordString(item, 'targetScreen') ? `#/${recordString(item, 'targetScreen')}` : undefined,\n        }),\n    );\n\n    return (\n        <div data-scene-id={element.id}>\n            <BreadCrumb model={model} home={home ? { icon: 'pi pi-home', url: `#/${home}` } : undefined} />\n        </div>\n    );\n}\n"],"names":["Breadcrumb","element","home","readOptionalString","model","readRecords","map","item","label","recordString","url","undefined","_jsx","div","data-scene-id","id","BreadCrumb","icon"],"mappings":";;;;;;AAQA;;;;;;;AAOC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;IAC5D,MAAMC,IAAAA,GAAOC,qCAAmBF,OAAAA,EAAS,kBAAA,CAAA;IACzC,MAAMG,KAAAA,GAAQC,8BAAYJ,OAAAA,EAAS,OAAA,CAAA,CAASK,GAAG,CAC3C,CAACC,QAAyB;AACtBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,GAAAA,EAAKD,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;AAC1B,QAAA,QAAA,gBAAAH,cAAA,CAACI,qBAAAA,EAAAA;YAAWZ,KAAAA,EAAOA,KAAAA;AAAOF,YAAAA,IAAAA,EAAMA,IAAAA,GAAO;gBAAEe,IAAAA,EAAM,YAAA;gBAAcP,GAAAA,EAAK,CAAC,EAAE,EAAER,IAAAA,CAAAA;aAAO,GAAIS;;;AAG9F;;;;"}

package/dist/cjs/shell/ConfigPanel.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('primereact/button');
+var sidebar = require('primereact/sidebar');
+var ColorScheme = require('../configuration/ColorScheme.js');
+var MenuTheme = require('../configuration/MenuTheme.js');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var LayoutModeSwitcher = require('./LayoutModeSwitcher.js');
+var ThemeSwitcher = require('./ThemeSwitcher.js');
+var elementProperties = require('./elementProperties.js');
+
+/** What each color scheme is called in the configurator. */ const colorSchemeLabels = {
+    [ColorScheme.ColorScheme.Light]: 'Light',
+    [ColorScheme.ColorScheme.Dark]: 'Dark'
+};
+/** What each menu theme is called in the configurator. */ const menuThemeLabels = {
+    [MenuTheme.MenuTheme.Light]: 'Light',
+    [MenuTheme.MenuTheme.Dark]: 'Dark',
+    [MenuTheme.MenuTheme.Primary]: 'Primary'
+};
+/**
+ * The floating configurator.
+ *
+ * The axes are the ones the modern PrimeTek templates expose - color scheme, menu mode, menu theme and
+ * theme - because those are the four choices that actually change how an application feels, and a
+ * configurator with more knobs than that becomes a settings screen nobody finishes reading.
+ *
+ * The panel itself is PrimeReact 10's `Sidebar`, which is an overlay drawer rather than an app-shell
+ * sidebar - this is the one use it was designed for. (v11 renames it `Drawer` precisely to stop the
+ * confusion, and gives the app-shell role to a new `Sidebar`.)
+ */ function ConfigPanel({ element, slots }) {
+    const [isVisible, setIsVisible] = react.useState(false);
+    const { config, setColorScheme, setMenuTheme } = LayoutConfigProvider.useLayoutConfig();
+    const title = elementProperties.readString(element, 'title', 'Settings');
+    const showsMenuTheme = elementProperties.readBoolean(element, 'showMenuTheme', true);
+    const showsMode = elementProperties.readBoolean(element, 'showLayoutMode', true);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                type: "button",
+                rounded: true,
+                icon: "pi pi-cog",
+                className: "layout-config-button",
+                "aria-label": title,
+                "data-scene-id": element.id,
+                onClick: ()=>setIsVisible(true)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(sidebar.Sidebar, {
+                visible: isVisible,
+                position: "right",
+                header: title,
+                onHide: ()=>setIsVisible(false),
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "layout-config-panel",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                    className: "layout-config-section-title",
+                                    children: "Color scheme"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "layout-config-options",
+                                    role: "group",
+                                    "aria-label": "Color scheme",
+                                    children: ColorScheme.colorSchemes.map((scheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: "layout-config-option",
+                                            "aria-pressed": config.colorScheme === scheme,
+                                            onClick: ()=>setColorScheme(scheme),
+                                            children: colorSchemeLabels[scheme]
+                                        }, scheme))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(ThemeSwitcher.ThemeSwitcher, {
+                            element: {
+                                ...element,
+                                id: `${element.id}-theme`,
+                                properties: {
+                                    ...element.properties,
+                                    label: 'Theme'
+                                }
+                            },
+                            slots: {}
+                        }),
+                        showsMode && /*#__PURE__*/ jsxRuntime.jsx(LayoutModeSwitcher.LayoutModeSwitcher, {
+                            element: {
+                                ...element,
+                                id: `${element.id}-mode`,
+                                properties: {
+                                    label: 'Menu mode'
+                                }
+                            },
+                            slots: {}
+                        }),
+                        showsMenuTheme && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                    className: "layout-config-section-title",
+                                    children: "Menu theme"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "layout-config-options",
+                                    role: "group",
+                                    "aria-label": "Menu theme",
+                                    children: MenuTheme.menuThemes.map((menuTheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            type: "button",
+                                            className: "layout-config-option",
+                                            "aria-pressed": config.menuTheme === menuTheme,
+                                            onClick: ()=>setMenuTheme(menuTheme),
+                                            children: menuThemeLabels[menuTheme]
+                                        }, menuTheme))
+                                })
+                            ]
+                        }),
+                        slots.content
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+exports.ConfigPanel = ConfigPanel;
+//# sourceMappingURL=ConfigPanel.js.map

package/dist/cjs/shell/ConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPanel.js","sources":["../../../shell/ConfigPanel.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 { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Sidebar } from 'primereact/sidebar';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ColorScheme, MenuTheme, colorSchemes, menuThemes, useLayoutConfig } from '../configuration';\nimport { LayoutModeSwitcher } from './LayoutModeSwitcher';\nimport { ThemeSwitcher } from './ThemeSwitcher';\nimport { readBoolean, readString } from './elementProperties';\n\n/** What each color scheme is called in the configurator. */\nconst colorSchemeLabels: Record<ColorScheme, string> = {\n    [ColorScheme.Light]: 'Light',\n    [ColorScheme.Dark]: 'Dark',\n};\n\n/** What each menu theme is called in the configurator. */\nconst menuThemeLabels: Record<MenuTheme, string> = {\n    [MenuTheme.Light]: 'Light',\n    [MenuTheme.Dark]: 'Dark',\n    [MenuTheme.Primary]: 'Primary',\n};\n\n/**\n * The floating configurator.\n *\n * The axes are the ones the modern PrimeTek templates expose - color scheme, menu mode, menu theme and\n * theme - because those are the four choices that actually change how an application feels, and a\n * configurator with more knobs than that becomes a settings screen nobody finishes reading.\n *\n * The panel itself is PrimeReact 10's `Sidebar`, which is an overlay drawer rather than an app-shell\n * sidebar - this is the one use it was designed for. (v11 renames it `Drawer` precisely to stop the\n * confusion, and gives the app-shell role to a new `Sidebar`.)\n */\nexport function ConfigPanel({ element, slots }: RegisteredComponentProps) {\n    const [isVisible, setIsVisible] = useState(false);\n    const { config, setColorScheme, setMenuTheme } = useLayoutConfig();\n    const title = readString(element, 'title', 'Settings');\n    const showsMenuTheme = readBoolean(element, 'showMenuTheme', true);\n    const showsMode = readBoolean(element, 'showLayoutMode', true);\n\n    return (\n        <>\n            <Button\n                type='button'\n                rounded\n                icon='pi pi-cog'\n                className='layout-config-button'\n                aria-label={title}\n                data-scene-id={element.id}\n                onClick={() => setIsVisible(true)}\n            />\n            <Sidebar visible={isVisible} position='right' header={title} onHide={() => setIsVisible(false)}>\n                <div className='layout-config-panel'>\n                    <div>\n                        <h3 className='layout-config-section-title'>Color scheme</h3>\n                        <div className='layout-config-options' role='group' aria-label='Color scheme'>\n                            {colorSchemes.map(scheme => (\n                                <button\n                                    key={scheme}\n                                    type='button'\n                                    className='layout-config-option'\n                                    aria-pressed={config.colorScheme === scheme}\n                                    onClick={() => setColorScheme(scheme)}>\n                                    {colorSchemeLabels[scheme]}\n                                </button>\n                            ))}\n                        </div>\n                    </div>\n\n                    <ThemeSwitcher\n                        element={{ ...element, id: `${element.id}-theme`, properties: { ...element.properties, label: 'Theme' } }}\n                        slots={{}}\n                    />\n\n                    {showsMode && (\n                        <LayoutModeSwitcher element={{ ...element, id: `${element.id}-mode`, properties: { label: 'Menu mode' } }} slots={{}} />\n                    )}\n\n                    {showsMenuTheme && (\n                        <div>\n                            <h3 className='layout-config-section-title'>Menu theme</h3>\n                            <div className='layout-config-options' role='group' aria-label='Menu theme'>\n                                {menuThemes.map(menuTheme => (\n                                    <button\n                                        key={menuTheme}\n                                        type='button'\n                                        className='layout-config-option'\n                                        aria-pressed={config.menuTheme === menuTheme}\n                                        onClick={() => setMenuTheme(menuTheme)}>\n                                        {menuThemeLabels[menuTheme]}\n                                    </button>\n                                ))}\n                            </div>\n                        </div>\n                    )}\n\n                    {slots.content}\n                </div>\n            </Sidebar>\n        </>\n    );\n}\n"],"names":["colorSchemeLabels","ColorScheme","Light","Dark","menuThemeLabels","MenuTheme","Primary","ConfigPanel","element","slots","isVisible","setIsVisible","useState","config","setColorScheme","setMenuTheme","useLayoutConfig","title","readString","showsMenuTheme","readBoolean","showsMode","_jsxs","_Fragment","_jsx","Button","type","rounded","icon","className","aria-label","data-scene-id","id","onClick","Sidebar","visible","position","header","onHide","div","h3","role","colorSchemes","map","scheme","button","aria-pressed","colorScheme","ThemeSwitcher","properties","label","LayoutModeSwitcher","menuThemes","menuTheme","content"],"mappings":"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"}

package/dist/cjs/shell/Footer.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var elementProperties = require('./elementProperties.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The strip below the content.
+ *
+ * Kept as its own slot rather than folded into the content because it is application chrome, not part of
+ * a screen: the same footer is on every page, and a screen that had to render it would have to remember
+ * to.
+ */ function Footer({ element, slots }) {
+    const text = elementProperties.readString(element, 'text');
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                "data-scene-id": element.id,
+                children: text
+            }),
+            slots.content
+        ]
+    });
+}
+
+exports.Footer = Footer;
+//# sourceMappingURL=Footer.js.map

package/dist/cjs/shell/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../shell/Footer.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readString } from './elementProperties';\n\n/**\n * The strip below the content.\n *\n * Kept as its own slot rather than folded into the content because it is application chrome, not part of\n * a screen: the same footer is on every page, and a screen that had to render it would have to remember\n * to.\n */\nexport function Footer({ element, slots }: RegisteredComponentProps) {\n    const text = readString(element, 'text');\n\n    return (\n        <>\n            <span data-scene-id={element.id}>{text}</span>\n            {slots.content}\n        </>\n    );\n}\n"],"names":["Footer","element","slots","text","readString","_jsxs","_Fragment","_jsx","span","data-scene-id","id","content"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;AAMC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IAC/D,MAAMC,IAAAA,GAAOC,6BAAWH,OAAAA,EAAS,MAAA,CAAA;IAEjC,qBACII,eAAA,CAAAC,mBAAA,EAAA;;0BACIC,cAAA,CAACC,MAAAA,EAAAA;AAAKC,gBAAAA,eAAAA,EAAeR,QAAQS,EAAE;AAAGP,gBAAAA,QAAAA,EAAAA;;AACjCD,YAAAA,KAAAA,CAAMS;;;AAGnB;;;;"}

package/dist/cjs/shell/FullPageShell.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var SlotName = require('../layouts/SlotName.js');
+require('@cratis/scene.model');
+require('../layouts/shellComponents.js');
+require('../layouts/appShell.js');
+require('../layouts/fullPage.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-less shell: content, an optional branding aside, and the configurator.
+ *
+ * Login, register, password reset, verification, lock, error, access-denied, not-found and landing screens
+ * all render here rather than in a stripped-down application shell. That split is structural in every
+ * PrimeTek template, and for a good reason: those screens have no navigation state to hold, no sidebar to
+ * remember, and no breadcrumb to place, so hanging them off the application shell means every one of the
+ * eight modes has to have an answer for a page that has no menu.
+ *
+ * The configurator stays, because a sign-in page still has to honor the chosen theme - it is very often
+ * the first page anyone sees.
+ */ function FullPageShell({ element, slots }) {
+    const surface = /*#__PURE__*/ jsxRuntime.jsx(FullPageSurface, {
+        elementId: element.id,
+        slots: slots
+    });
+    return LayoutConfigProvider.useOptionalLayoutConfig() ? surface : /*#__PURE__*/ jsxRuntime.jsx(LayoutConfigProvider.LayoutConfigProvider, {
+        children: surface
+    });
+}
+function FullPageSurface({ elementId, slots }) {
+    const hasAside = (slots[SlotName.SlotName.Aside]?.length ?? 0) > 0;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "layout-full-page",
+        "data-scene-id": elementId,
+        children: [
+            hasAside && /*#__PURE__*/ jsxRuntime.jsx("aside", {
+                className: "layout-full-page-aside",
+                children: slots[SlotName.SlotName.Aside]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("main", {
+                className: "layout-full-page-content",
+                children: slots[SlotName.SlotName.Content]
+            }),
+            slots[SlotName.SlotName.ConfigPanel]
+        ]
+    });
+}
+
+exports.FullPageShell = FullPageShell;
+//# sourceMappingURL=FullPageShell.js.map

package/dist/cjs/shell/FullPageShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullPageShell.js","sources":["../../../shell/FullPageShell.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 { ReactNode } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { LayoutConfigProvider, useOptionalLayoutConfig } from '../configuration';\nimport { SlotName } from '../layouts';\n\n/**\n * The chrome-less shell: content, an optional branding aside, and the configurator.\n *\n * Login, register, password reset, verification, lock, error, access-denied, not-found and landing screens\n * all render here rather than in a stripped-down application shell. That split is structural in every\n * PrimeTek template, and for a good reason: those screens have no navigation state to hold, no sidebar to\n * remember, and no breadcrumb to place, so hanging them off the application shell means every one of the\n * eight modes has to have an answer for a page that has no menu.\n *\n * The configurator stays, because a sign-in page still has to honor the chosen theme - it is very often\n * the first page anyone sees.\n */\nexport function FullPageShell({ element, slots }: RegisteredComponentProps) {\n    const surface = <FullPageSurface elementId={element.id} slots={slots} />;\n    return useOptionalLayoutConfig() ? surface : <LayoutConfigProvider>{surface}</LayoutConfigProvider>;\n}\n\ninterface FullPageSurfaceProps {\n    elementId: string;\n    slots: Record<string, ReactNode[]>;\n}\n\nfunction FullPageSurface({ elementId, slots }: FullPageSurfaceProps) {\n    const hasAside = (slots[SlotName.Aside]?.length ?? 0) > 0;\n\n    return (\n        <div className='layout-full-page' data-scene-id={elementId}>\n            {hasAside && <aside className='layout-full-page-aside'>{slots[SlotName.Aside]}</aside>}\n            <main className='layout-full-page-content'>{slots[SlotName.Content]}</main>\n            {slots[SlotName.ConfigPanel]}\n        </div>\n    );\n}\n"],"names":["FullPageShell","element","slots","surface","_jsx","FullPageSurface","elementId","id","useOptionalLayoutConfig","LayoutConfigProvider","hasAside","SlotName","Aside","length","_jsxs","div","className","data-scene-id","aside","main","Content","ConfigPanel"],"mappings":";;;;;;;;;;AAAA;AACA;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACtE,IAAA,MAAMC,wBAAUC,cAAA,CAACC,eAAAA,EAAAA;AAAgBC,QAAAA,SAAAA,EAAWL,QAAQM,EAAE;QAAEL,KAAAA,EAAOA;;IAC/D,OAAOM,4CAAAA,EAAAA,GAA4BL,wBAAUC,cAAA,CAACK,yCAAAA,EAAAA;AAAsBN,QAAAA,QAAAA,EAAAA;;AACxE;AAOA,SAASE,eAAAA,CAAgB,EAAEC,SAAS,EAAEJ,KAAK,EAAwB,EAAA;IAC/D,MAAMQ,QAAAA,GAAW,CAACR,KAAK,CAACS,iBAAAA,CAASC,KAAK,CAAC,EAAEC,MAAAA,IAAU,CAAA,IAAK,CAAA;AAExD,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,kBAAA;QAAmBC,eAAAA,EAAeX,SAAAA;;AAC5CI,YAAAA,QAAAA,kBAAYN,cAAA,CAACc,OAAAA,EAAAA;gBAAMF,SAAAA,EAAU,wBAAA;0BAA0Bd,KAAK,CAACS,iBAAAA,CAASC,KAAK;;0BAC5ER,cAAA,CAACe,MAAAA,EAAAA;gBAAKH,SAAAA,EAAU,0BAAA;0BAA4Bd,KAAK,CAACS,iBAAAA,CAASS,OAAO;;YACjElB,KAAK,CAACS,iBAAAA,CAASU,WAAW;;;AAGvC;;;;"}

package/dist/cjs/shell/LayoutModeSwitcher.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LayoutMode = require('../configuration/LayoutMode.js');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var elementProperties = require('./elementProperties.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** What each mode is called in the configurator - the same names the PrimeTek template line uses. */ const modeLabels = {
+    [LayoutMode.LayoutMode.Static]: 'Static',
+    [LayoutMode.LayoutMode.Overlay]: 'Overlay',
+    [LayoutMode.LayoutMode.Slim]: 'Slim',
+    [LayoutMode.LayoutMode.SlimPlus]: 'Slim+',
+    [LayoutMode.LayoutMode.Compact]: 'Compact',
+    [LayoutMode.LayoutMode.Horizontal]: 'Horizontal',
+    [LayoutMode.LayoutMode.Reveal]: 'Reveal',
+    [LayoutMode.LayoutMode.Drawer]: 'Drawer'
+};
+/**
+ * Switches between the layout modes.
+ *
+ * Below the mobile breakpoint every button is disabled and the panel says why, rather than the picker
+ * disappearing. A control that vanishes reads as a bug; a disabled control with a sentence next to it
+ * reads as a decision - and the choice is still recorded and still there when the window grows again.
+ */ function LayoutModeSwitcher({ element }) {
+    const { config, setMode } = LayoutConfigProvider.useLayoutConfig();
+    const label = elementProperties.readString(element, 'label', 'Menu mode');
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        "data-scene-id": element.id,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                className: "layout-config-section-title",
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "layout-config-options",
+                role: "group",
+                "aria-label": label,
+                children: LayoutMode.layoutModes.map((mode)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        className: "layout-config-option",
+                        disabled: config.isMobile,
+                        "aria-pressed": config.mode === mode,
+                        onClick: ()=>setMode(mode),
+                        children: modeLabels[mode]
+                    }, mode))
+            }),
+            config.isMobile && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                className: "layout-config-note",
+                children: "Below 991px every mode renders off-canvas, so the choice is kept but not applied."
+            })
+        ]
+    });
+}
+
+exports.LayoutModeSwitcher = LayoutModeSwitcher;
+//# sourceMappingURL=LayoutModeSwitcher.js.map

package/dist/cjs/shell/LayoutModeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutModeSwitcher.js","sources":["../../../shell/LayoutModeSwitcher.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { LayoutMode, layoutModes, useLayoutConfig } from '../configuration';\nimport { readString } from './elementProperties';\n\n/** What each mode is called in the configurator - the same names the PrimeTek template line uses. */\nconst modeLabels: Record<LayoutMode, string> = {\n    [LayoutMode.Static]: 'Static',\n    [LayoutMode.Overlay]: 'Overlay',\n    [LayoutMode.Slim]: 'Slim',\n    [LayoutMode.SlimPlus]: 'Slim+',\n    [LayoutMode.Compact]: 'Compact',\n    [LayoutMode.Horizontal]: 'Horizontal',\n    [LayoutMode.Reveal]: 'Reveal',\n    [LayoutMode.Drawer]: 'Drawer',\n};\n\n/**\n * Switches between the layout modes.\n *\n * Below the mobile breakpoint every button is disabled and the panel says why, rather than the picker\n * disappearing. A control that vanishes reads as a bug; a disabled control with a sentence next to it\n * reads as a decision - and the choice is still recorded and still there when the window grows again.\n */\nexport function LayoutModeSwitcher({ element }: RegisteredComponentProps) {\n    const { config, setMode } = useLayoutConfig();\n    const label = readString(element, 'label', 'Menu mode');\n\n    return (\n        <div data-scene-id={element.id}>\n            <h3 className='layout-config-section-title'>{label}</h3>\n            <div className='layout-config-options' role='group' aria-label={label}>\n                {layoutModes.map(mode => (\n                    <button\n                        key={mode}\n                        type='button'\n                        className='layout-config-option'\n                        disabled={config.isMobile}\n                        aria-pressed={config.mode === mode}\n                        onClick={() => setMode(mode)}>\n                        {modeLabels[mode]}\n                    </button>\n                ))}\n            </div>\n            {config.isMobile && <p className='layout-config-note'>Below 991px every mode renders off-canvas, so the choice is kept but not applied.</p>}\n        </div>\n    );\n}\n"],"names":["modeLabels","LayoutMode","Static","Overlay","Slim","SlimPlus","Compact","Horizontal","Reveal","Drawer","LayoutModeSwitcher","element","config","setMode","useLayoutConfig","label","readString","_jsxs","div","data-scene-id","id","_jsx","h3","className","role","aria-label","layoutModes","map","mode","button","type","disabled","isMobile","aria-pressed","onClick","p"],"mappings":";;;;;;;AAAA;AACA;AAMA,sGACA,MAAMA,UAAAA,GAAyC;IAC3C,CAACC,qBAAAA,CAAWC,MAAM,GAAG,QAAA;IACrB,CAACD,qBAAAA,CAAWE,OAAO,GAAG,SAAA;IACtB,CAACF,qBAAAA,CAAWG,IAAI,GAAG,MAAA;IACnB,CAACH,qBAAAA,CAAWI,QAAQ,GAAG,OAAA;IACvB,CAACJ,qBAAAA,CAAWK,OAAO,GAAG,SAAA;IACtB,CAACL,qBAAAA,CAAWM,UAAU,GAAG,YAAA;IACzB,CAACN,qBAAAA,CAAWO,MAAM,GAAG,QAAA;IACrB,CAACP,qBAAAA,CAAWQ,MAAM,GAAG;AACzB,CAAA;AAEA;;;;;;AAMC,IACM,SAASC,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,oCAAAA,EAAAA;IAC5B,MAAMC,KAAAA,GAAQC,4BAAAA,CAAWL,OAAAA,EAAS,OAAA,EAAS,WAAA,CAAA;AAE3C,IAAA,qBACIM,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;;0BAC1BC,cAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,6BAAA;AAA+BR,gBAAAA,QAAAA,EAAAA;;0BAC7CM,cAAA,CAACH,KAAAA,EAAAA;gBAAIK,SAAAA,EAAU,uBAAA;gBAAwBC,IAAAA,EAAK,OAAA;gBAAQC,YAAAA,EAAYV,KAAAA;AAC3DW,gBAAAA,QAAAA,EAAAA,sBAAAA,CAAYC,GAAG,CAACC,CAAAA,IAAAA,iBACbP,cAAA,CAACQ,QAAAA,EAAAA;wBAEGC,IAAAA,EAAK,QAAA;wBACLP,SAAAA,EAAU,sBAAA;AACVQ,wBAAAA,QAAAA,EAAUnB,OAAOoB,QAAQ;wBACzBC,cAAAA,EAAcrB,MAAAA,CAAOgB,IAAI,KAAKA,IAAAA;AAC9BM,wBAAAA,OAAAA,EAAS,IAAMrB,OAAAA,CAAQe,IAAAA,CAAAA;AACtB5B,wBAAAA,QAAAA,EAAAA,UAAU,CAAC4B,IAAAA;AANPA,qBAAAA,EAAAA,IAAAA,CAAAA;;YAUhBhB,MAAAA,CAAOoB,QAAQ,kBAAIX,cAAA,CAACc,GAAAA,EAAAA;gBAAEZ,SAAAA,EAAU,oBAAA;AAAqB,gBAAA,QAAA,EAAA;;;;AAGlE;;;;"}

package/dist/cjs/shell/Logo.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var scene_react = require('@cratis/scene.react');
+var elementProperties = require('./elementProperties.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The brand mark.
+ *
+ * This is the one place in the shell that reads the active theme directly rather than through a token,
+ * because picking between a light-background and a dark-background logo asset is a decision no CSS custom
+ * property can express - the two are different files. `useSceneTheme` exists for exactly this case.
+ */ function Logo({ element }) {
+    const theme = scene_react.useSceneTheme();
+    const label = elementProperties.readString(element, 'label', 'Cratis');
+    const initials = elementProperties.readString(element, 'initials', label.slice(0, 1).toUpperCase());
+    const lightSource = elementProperties.readOptionalString(element, 'lightImageUrl');
+    const darkSource = elementProperties.readOptionalString(element, 'darkImageUrl');
+    const source = theme?.isDark ? darkSource ?? lightSource : lightSource ?? darkSource;
+    const targetScreen = elementProperties.readString(element, 'targetScreen', 'Dashboard');
+    return /*#__PURE__*/ jsxRuntime.jsxs("a", {
+        className: "layout-logo",
+        href: `#/${targetScreen}`,
+        "data-scene-id": element.id,
+        children: [
+            source ? /*#__PURE__*/ jsxRuntime.jsx("img", {
+                src: source,
+                alt: label,
+                height: 28
+            }) : /*#__PURE__*/ jsxRuntime.jsx("span", {
+                className: "layout-logo-mark",
+                children: initials
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                children: label
+            })
+        ]
+    });
+}
+
+exports.Logo = Logo;
+//# sourceMappingURL=Logo.js.map

package/dist/cjs/shell/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sources":["../../../shell/Logo.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { useSceneTheme } from '@cratis/scene.react';\nimport { readOptionalString, readString } from './elementProperties';\n\n/**\n * The brand mark.\n *\n * This is the one place in the shell that reads the active theme directly rather than through a token,\n * because picking between a light-background and a dark-background logo asset is a decision no CSS custom\n * property can express - the two are different files. `useSceneTheme` exists for exactly this case.\n */\nexport function Logo({ element }: RegisteredComponentProps) {\n    const theme = useSceneTheme();\n    const label = readString(element, 'label', 'Cratis');\n    const initials = readString(element, 'initials', label.slice(0, 1).toUpperCase());\n    const lightSource = readOptionalString(element, 'lightImageUrl');\n    const darkSource = readOptionalString(element, 'darkImageUrl');\n    const source = theme?.isDark ? darkSource ?? lightSource : lightSource ?? darkSource;\n    const targetScreen = readString(element, 'targetScreen', 'Dashboard');\n\n    return (\n        <a className='layout-logo' href={`#/${targetScreen}`} data-scene-id={element.id}>\n            {source ? <img src={source} alt={label} height={28} /> : <span className='layout-logo-mark'>{initials}</span>}\n            <span>{label}</span>\n        </a>\n    );\n}\n"],"names":["Logo","element","theme","useSceneTheme","label","readString","initials","slice","toUpperCase","lightSource","readOptionalString","darkSource","source","isDark","targetScreen","_jsxs","a","className","href","data-scene-id","id","_jsx","img","src","alt","height","span"],"mappings":";;;;;;AAAA;AACA;AAMA;;;;;;AAMC,IACM,SAASA,IAAAA,CAAK,EAAEC,OAAO,EAA4B,EAAA;AACtD,IAAA,MAAMC,KAAAA,GAAQC,yBAAAA,EAAAA;IACd,MAAMC,KAAAA,GAAQC,4BAAAA,CAAWJ,OAAAA,EAAS,OAAA,EAAS,QAAA,CAAA;IAC3C,MAAMK,QAAAA,GAAWD,6BAAWJ,OAAAA,EAAS,UAAA,EAAYG,MAAMG,KAAK,CAAC,CAAA,EAAG,CAAA,CAAA,CAAGC,WAAW,EAAA,CAAA;IAC9E,MAAMC,WAAAA,GAAcC,qCAAmBT,OAAAA,EAAS,eAAA,CAAA;IAChD,MAAMU,UAAAA,GAAaD,qCAAmBT,OAAAA,EAAS,cAAA,CAAA;AAC/C,IAAA,MAAMW,MAAAA,GAASV,KAAAA,EAAOW,MAAAA,GAASF,UAAAA,IAAcF,cAAcA,WAAAA,IAAeE,UAAAA;IAC1E,MAAMG,YAAAA,GAAeT,4BAAAA,CAAWJ,OAAAA,EAAS,cAAA,EAAgB,WAAA,CAAA;AAEzD,IAAA,qBACIc,eAAA,CAACC,GAAAA,EAAAA;QAAEC,SAAAA,EAAU,aAAA;QAAcC,IAAAA,EAAM,CAAC,EAAE,EAAEJ,YAAAA,CAAAA,CAAc;AAAEK,QAAAA,eAAAA,EAAelB,QAAQmB,EAAE;;AAC1ER,YAAAA,MAAAA,iBAASS,cAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKX,MAAAA;gBAAQY,GAAAA,EAAKpB,KAAAA;gBAAOqB,MAAAA,EAAQ;+BAASJ,cAAA,CAACK,MAAAA,EAAAA;gBAAKT,SAAAA,EAAU,kBAAA;AAAoBX,gBAAAA,QAAAA,EAAAA;;0BAC7Fe,cAAA,CAACK,MAAAA,EAAAA;AAAMtB,gBAAAA,QAAAA,EAAAA;;;;AAGnB;;;;"}

package/dist/cjs/shell/Mask.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+
+/**
+ * The scrim behind a floating sidebar.
+ *
+ * It is a `button` rather than a `div` because its only job is to close the sidebar, and a click target
+ * that is not focusable or reachable from the keyboard traps anyone not using a mouse behind an open
+ * overlay with no way out. It renders nothing at all when no sidebar is floating, so it never sits
+ * invisibly over the page swallowing clicks.
+ */ function LayoutMask() {
+    const { isMaskVisible, setSidebarOpen } = LayoutConfigProvider.useLayoutConfig();
+    if (!isMaskVisible) {
+        return undefined;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("button", {
+        type: "button",
+        className: "layout-mask",
+        "aria-label": "Close the menu",
+        onClick: ()=>setSidebarOpen(false)
+    });
+}
+/**
+ * The `mask` component, for a template that wants to place the scrim itself rather than let
+ * {@link AppShell} do it.
+ */ function Mask() {
+    return /*#__PURE__*/ jsxRuntime.jsx(LayoutMask, {});
+}
+
+exports.LayoutMask = LayoutMask;
+exports.Mask = Mask;
+//# sourceMappingURL=Mask.js.map