@cratis/scene.blueprint.default 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.js","sources":["../../../shell/Mask.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 { useLayoutConfig } from '../configuration';\n\n/**\n * The scrim behind a floating sidebar.\n *\n * It is a `button` rather than a `div` because its only job is to close the sidebar, and a click target\n * that is not focusable or reachable from the keyboard traps anyone not using a mouse behind an open\n * overlay with no way out. It renders nothing at all when no sidebar is floating, so it never sits\n * invisibly over the page swallowing clicks.\n */\nexport function LayoutMask() {\n    const { isMaskVisible, setSidebarOpen } = useLayoutConfig();\n    if (!isMaskVisible) {\n        return undefined;\n    }\n\n    return <button type='button' className='layout-mask' aria-label='Close the menu' onClick={() => setSidebarOpen(false)} />;\n}\n\n/**\n * The `mask` component, for a template that wants to place the scrim itself rather than let\n * {@link AppShell} do it.\n */\nexport function Mask() {\n    return <LayoutMask />;\n}\n"],"names":["LayoutMask","isMaskVisible","setSidebarOpen","useLayoutConfig","undefined","_jsx","button","type","className","aria-label","onClick","Mask"],"mappings":";;;;;AAKA;;;;;;;AAOC,IACM,SAASA,UAAAA,GAAAA;AACZ,IAAA,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAE,GAAGC,oCAAAA,EAAAA;AAC1C,IAAA,IAAI,CAACF,aAAAA,EAAe;QAChB,OAAOG,SAAAA;AACX,IAAA;AAEA,IAAA,qBAAOC,cAAA,CAACC,QAAAA,EAAAA;QAAOC,IAAAA,EAAK,QAAA;QAASC,SAAAA,EAAU,aAAA;QAAcC,YAAAA,EAAW,gBAAA;AAAiBC,QAAAA,OAAAA,EAAS,IAAMR,cAAAA,CAAe,KAAA;;AACnH;AAEA;;;AAGC,IACM,SAASS,IAAAA,GAAAA;AACZ,IAAA,qBAAON,cAAA,CAACL,UAAAA,EAAAA,EAAAA,CAAAA;AACZ;;;;;"}

package/dist/cjs/shell/Menu.js

@@ -0,0 +1,36 @@
+'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.
+/**
+ * A navigation list.
+ *
+ * One markup shape - a `nav` around a `ul` of {@link MenuItem}s - serves every mode; the difference
+ * between a docked list, a circular icon rail, a stacked label rail and a horizontal strip with drop-down
+ * submenus is entirely in the stylesheet. That is the point of the mode class vocabulary: the menu does
+ * not know which mode it is in, so a screen's navigation cannot be written for one mode and broken in
+ * another.
+ */ function Menu({ element, slots }) {
+    const title = elementProperties.readString(element, 'title');
+    const label = elementProperties.readString(element, 'label', 'Main');
+    return /*#__PURE__*/ jsxRuntime.jsxs("nav", {
+        "data-scene-id": element.id,
+        "aria-label": label,
+        children: [
+            title && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "layout-menu-section-title",
+                children: title
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                className: "layout-menu",
+                children: slots.items
+            })
+        ]
+    });
+}
+
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../shell/Menu.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 * A navigation list.\n *\n * One markup shape - a `nav` around a `ul` of {@link MenuItem}s - serves every mode; the difference\n * between a docked list, a circular icon rail, a stacked label rail and a horizontal strip with drop-down\n * submenus is entirely in the stylesheet. That is the point of the mode class vocabulary: the menu does\n * not know which mode it is in, so a screen's navigation cannot be written for one mode and broken in\n * another.\n */\nexport function Menu({ element, slots }: RegisteredComponentProps) {\n    const title = readString(element, 'title');\n    const label = readString(element, 'label', 'Main');\n\n    return (\n        <nav data-scene-id={element.id} aria-label={label}>\n            {title && <div className='layout-menu-section-title'>{title}</div>}\n            <ul className='layout-menu'>{slots.items}</ul>\n        </nav>\n    );\n}\n"],"names":["Menu","element","slots","title","readString","label","_jsxs","nav","data-scene-id","id","aria-label","_jsx","div","className","ul","items"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;;AAQC,IACM,SAASA,IAAAA,CAAK,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IAC7D,MAAMC,KAAAA,GAAQC,6BAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,KAAAA,GAAQD,4BAAAA,CAAWH,OAAAA,EAAS,OAAA,EAAS,MAAA,CAAA;AAE3C,IAAA,qBACIK,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEC,YAAAA,EAAYL,KAAAA;;AACvCF,YAAAA,KAAAA,kBAASQ,cAAA,CAACC,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,2BAAA;AAA6BV,gBAAAA,QAAAA,EAAAA;;0BACtDQ,cAAA,CAACG,IAAAA,EAAAA;gBAAGD,SAAAA,EAAU,aAAA;AAAeX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;;;AAG/C;;;;"}

package/dist/cjs/shell/MenuItem.js

@@ -0,0 +1,65 @@
+'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.
+/**
+ * One entry in a navigation list, optionally with a submenu.
+ *
+ * Its properties are deliberately the {@link NavigationItem} contract - `label`, `targetScreen`,
+ * `routeParameterBindings`, `order`, `group` - so the very same element can be handed to the
+ * `Navigation` contribution point and read back by `extractNavigationItem`. A screen therefore declares
+ * its navigation once and gets both the sidebar entry and the aggregated navigation for free, instead of
+ * maintaining a menu and a contribution that drift apart.
+ *
+ * The route is rendered as a hash route against the target screen's name. A host with a real router
+ * renders the shell inside it and rewrites these; hashes keep the gallery navigable with no router at all,
+ * which is what a preview needs.
+ */ function MenuItem({ element, slots }) {
+    const label = elementProperties.readString(element, 'label');
+    const icon = elementProperties.readOptionalString(element, 'icon');
+    const badge = elementProperties.readOptionalString(element, 'badge');
+    const targetScreen = elementProperties.readOptionalString(element, 'targetScreen');
+    const isActive = elementProperties.readBoolean(element, 'isActive');
+    const hasSubmenu = (slots.items?.length ?? 0) > 0;
+    return /*#__PURE__*/ jsxRuntime.jsxs("li", {
+        className: "layout-menu-item",
+        "data-scene-id": element.id,
+        "data-active": isActive,
+        "data-target-screen": targetScreen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("a", {
+                className: "layout-menu-link",
+                href: targetScreen ? `#/${targetScreen}` : undefined,
+                "aria-current": isActive ? 'page' : undefined,
+                children: [
+                    icon && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                        className: `layout-menu-icon ${icon}`,
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "layout-menu-label",
+                        children: label
+                    }),
+                    badge && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "layout-menu-badge",
+                        children: badge
+                    }),
+                    hasSubmenu && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                        className: "pi pi-angle-down",
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+            hasSubmenu && /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                className: "layout-submenu",
+                children: slots.items
+            })
+        ]
+    });
+}
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../shell/MenuItem.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 { readBoolean, readOptionalString, readString } from './elementProperties';\n\n/**\n * One entry in a navigation list, optionally with a submenu.\n *\n * Its properties are deliberately the {@link NavigationItem} contract - `label`, `targetScreen`,\n * `routeParameterBindings`, `order`, `group` - so the very same element can be handed to the\n * `Navigation` contribution point and read back by `extractNavigationItem`. A screen therefore declares\n * its navigation once and gets both the sidebar entry and the aggregated navigation for free, instead of\n * maintaining a menu and a contribution that drift apart.\n *\n * The route is rendered as a hash route against the target screen's name. A host with a real router\n * renders the shell inside it and rewrites these; hashes keep the gallery navigable with no router at all,\n * which is what a preview needs.\n */\nexport function MenuItem({ element, slots }: RegisteredComponentProps) {\n    const label = readString(element, 'label');\n    const icon = readOptionalString(element, 'icon');\n    const badge = readOptionalString(element, 'badge');\n    const targetScreen = readOptionalString(element, 'targetScreen');\n    const isActive = readBoolean(element, 'isActive');\n    const hasSubmenu = (slots.items?.length ?? 0) > 0;\n\n    return (\n        <li className='layout-menu-item' data-scene-id={element.id} data-active={isActive} data-target-screen={targetScreen}>\n            <a className='layout-menu-link' href={targetScreen ? `#/${targetScreen}` : undefined} aria-current={isActive ? 'page' : undefined}>\n                {icon && <i className={`layout-menu-icon ${icon}`} aria-hidden='true' />}\n                <span className='layout-menu-label'>{label}</span>\n                {badge && <span className='layout-menu-badge'>{badge}</span>}\n                {hasSubmenu && <i className='pi pi-angle-down' aria-hidden='true' />}\n            </a>\n            {hasSubmenu && <ul className='layout-submenu'>{slots.items}</ul>}\n        </li>\n    );\n}\n"],"names":["MenuItem","element","slots","label","readString","icon","readOptionalString","badge","targetScreen","isActive","readBoolean","hasSubmenu","items","length","_jsxs","li","className","data-scene-id","id","data-active","data-target-screen","a","href","undefined","aria-current","_jsx","i","aria-hidden","span","ul"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;;;;;;AAYC,IACM,SAASA,QAAAA,CAAS,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACjE,MAAMC,KAAAA,GAAQC,6BAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,IAAAA,GAAOC,qCAAmBL,OAAAA,EAAS,MAAA,CAAA;IACzC,MAAMM,KAAAA,GAAQD,qCAAmBL,OAAAA,EAAS,OAAA,CAAA;IAC1C,MAAMO,YAAAA,GAAeF,qCAAmBL,OAAAA,EAAS,cAAA,CAAA;IACjD,MAAMQ,QAAAA,GAAWC,8BAAYT,OAAAA,EAAS,UAAA,CAAA;IACtC,MAAMU,UAAAA,GAAa,CAACT,KAAAA,CAAMU,KAAK,EAAEC,MAAAA,IAAU,CAAA,IAAK,CAAA;AAEhD,IAAA,qBACIC,eAAA,CAACC,IAAAA,EAAAA;QAAGC,SAAAA,EAAU,kBAAA;AAAmBC,QAAAA,eAAAA,EAAehB,QAAQiB,EAAE;QAAEC,aAAAA,EAAaV,QAAAA;QAAUW,oBAAAA,EAAoBZ,YAAAA;;0BACnGM,eAAA,CAACO,GAAAA,EAAAA;gBAAEL,SAAAA,EAAU,kBAAA;AAAmBM,gBAAAA,IAAAA,EAAMd,YAAAA,GAAe,CAAC,EAAE,EAAEA,cAAc,GAAGe,SAAAA;AAAWC,gBAAAA,cAAAA,EAAcf,WAAW,MAAA,GAASc,SAAAA;;AACnHlB,oBAAAA,IAAAA,kBAAQoB,cAAA,CAACC,GAAAA,EAAAA;wBAAEV,SAAAA,EAAW,CAAC,iBAAiB,EAAEX,IAAAA,CAAAA,CAAM;wBAAEsB,aAAAA,EAAY;;kCAC/DF,cAAA,CAACG,MAAAA,EAAAA;wBAAKZ,SAAAA,EAAU,mBAAA;AAAqBb,wBAAAA,QAAAA,EAAAA;;AACpCI,oBAAAA,KAAAA,kBAASkB,cAAA,CAACG,MAAAA,EAAAA;wBAAKZ,SAAAA,EAAU,mBAAA;AAAqBT,wBAAAA,QAAAA,EAAAA;;AAC9CI,oBAAAA,UAAAA,kBAAcc,cAAA,CAACC,GAAAA,EAAAA;wBAAEV,SAAAA,EAAU,kBAAA;wBAAmBW,aAAAA,EAAY;;;;AAE9DhB,YAAAA,UAAAA,kBAAcc,cAAA,CAACI,IAAAA,EAAAA;gBAAGb,SAAAA,EAAU,gBAAA;AAAkBd,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMU;;;;AAGjE;;;;"}

package/dist/cjs/shell/PageHeader.js

@@ -0,0 +1,43 @@
+'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.
+/**
+ * A screen's title, subtitle and actions.
+ *
+ * This belongs to the layout package rather than to each screen because it is the one piece of page
+ * furniture every page template repeats. Centralizing it means the title/actions relationship is spaced
+ * and aligned identically across the whole page set, which is most of what makes a template set look like
+ * one product rather than twenty pages.
+ */ function PageHeader({ element, slots }) {
+    const title = elementProperties.readString(element, 'title');
+    const subtitle = elementProperties.readString(element, 'subtitle');
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "layout-page-header",
+        "data-scene-id": element.id,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("h1", {
+                        className: "layout-page-header-title",
+                        children: title
+                    }),
+                    subtitle && /*#__PURE__*/ jsxRuntime.jsx("p", {
+                        className: "layout-page-header-subtitle",
+                        children: subtitle
+                    })
+                ]
+            }),
+            (slots.actions?.length ?? 0) > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "layout-page-header-actions",
+                children: slots.actions
+            })
+        ]
+    });
+}
+
+exports.PageHeader = PageHeader;
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../shell/PageHeader.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 * A screen's title, subtitle and actions.\n *\n * This belongs to the layout package rather than to each screen because it is the one piece of page\n * furniture every page template repeats. Centralizing it means the title/actions relationship is spaced\n * and aligned identically across the whole page set, which is most of what makes a template set look like\n * one product rather than twenty pages.\n */\nexport function PageHeader({ element, slots }: RegisteredComponentProps) {\n    const title = readString(element, 'title');\n    const subtitle = readString(element, 'subtitle');\n\n    return (\n        <div className='layout-page-header' data-scene-id={element.id}>\n            <div>\n                <h1 className='layout-page-header-title'>{title}</h1>\n                {subtitle && <p className='layout-page-header-subtitle'>{subtitle}</p>}\n            </div>\n            {(slots.actions?.length ?? 0) > 0 && <div className='layout-page-header-actions'>{slots.actions}</div>}\n        </div>\n    );\n}\n"],"names":["PageHeader","element","slots","title","readString","subtitle","_jsxs","div","className","data-scene-id","id","_jsx","h1","p","actions","length"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;AAOC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACnE,MAAMC,KAAAA,GAAQC,6BAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,QAAAA,GAAWD,6BAAWH,OAAAA,EAAS,UAAA,CAAA;AAErC,IAAA,qBACIK,eAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,oBAAA;AAAqBC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;;0BACzDJ,eAAA,CAACC,KAAAA,EAAAA;;kCACGI,cAAA,CAACC,IAAAA,EAAAA;wBAAGJ,SAAAA,EAAU,0BAAA;AAA4BL,wBAAAA,QAAAA,EAAAA;;AACzCE,oBAAAA,QAAAA,kBAAYM,cAAA,CAACE,GAAAA,EAAAA;wBAAEL,SAAAA,EAAU,6BAAA;AAA+BH,wBAAAA,QAAAA,EAAAA;;;;AAE3DH,YAAAA,CAAAA,MAAMY,OAAO,EAAEC,UAAU,CAAA,IAAK,mBAAKJ,cAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,4BAAA;AAA8BN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMY;;;;AAGpG;;;;"}

package/dist/cjs/shell/RightPanel.js

@@ -0,0 +1,30 @@
+'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 inspector panel down the right-hand edge.
+ *
+ * Sakai has no right panel; the premium PrimeTek templates all do, and it is where activity feeds, recent
+ * items and inline help live. It is exposed as a slot the shell simply does not render when nothing fills
+ * it, so a screen pays nothing for a region it does not use.
+ */ function RightPanel({ element, slots }) {
+    const title = elementProperties.readString(element, 'title');
+    return /*#__PURE__*/ jsxRuntime.jsxs("section", {
+        "data-scene-id": element.id,
+        "aria-label": title || 'Panel',
+        children: [
+            title && /*#__PURE__*/ jsxRuntime.jsx("h2", {
+                className: "layout-page-header-title",
+                children: title
+            }),
+            slots.content
+        ]
+    });
+}
+
+exports.RightPanel = RightPanel;
+//# sourceMappingURL=RightPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.js","sources":["../../../shell/RightPanel.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 inspector panel down the right-hand edge.\n *\n * Sakai has no right panel; the premium PrimeTek templates all do, and it is where activity feeds, recent\n * items and inline help live. It is exposed as a slot the shell simply does not render when nothing fills\n * it, so a screen pays nothing for a region it does not use.\n */\nexport function RightPanel({ element, slots }: RegisteredComponentProps) {\n    const title = readString(element, 'title');\n\n    return (\n        <section data-scene-id={element.id} aria-label={title || 'Panel'}>\n            {title && <h2 className='layout-page-header-title'>{title}</h2>}\n            {slots.content}\n        </section>\n    );\n}\n"],"names":["RightPanel","element","slots","title","readString","_jsxs","section","data-scene-id","id","aria-label","_jsx","h2","className","content"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;AAMC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACnE,MAAMC,KAAAA,GAAQC,6BAAWH,OAAAA,EAAS,OAAA,CAAA;AAElC,IAAA,qBACII,eAAA,CAACC,SAAAA,EAAAA;AAAQC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;AAAEC,QAAAA,YAAAA,EAAYN,KAAAA,IAAS,OAAA;;AACpDA,YAAAA,KAAAA,kBAASO,cAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,0BAAA;AAA4BT,gBAAAA,QAAAA,EAAAA;;AACnDD,YAAAA,KAAAA,CAAMW;;;AAGnB;;;;"}

package/dist/cjs/shell/Sidebar.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('primereact/button');
+var layoutConfigTransitions = require('../configuration/layoutConfigTransitions.js');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var elementProperties = require('./elementProperties.js');
+
+/**
+ * The sidebar's own chrome, inside the panel {@link AppShell} positions.
+ *
+ * The panel and its contents are deliberately different components. Everything about *where* the sidebar
+ * is - translated off-canvas, collapsed to a rail, growing on hover - belongs to the mode and therefore to
+ * the shell; everything about *what is in it* belongs to the screen. A template can replace this header
+ * wholesale without any of the mode CSS noticing.
+ *
+ * The pin button only appears in `reveal` and `drawer`, the two modes where the sidebar answers to the
+ * pointer and therefore needs a way to be made to stay.
+ */ function Sidebar({ element, slots }) {
+    const { effectiveMode, config, toggleSidebarAnchor } = LayoutConfigProvider.useLayoutConfig();
+    const title = elementProperties.readString(element, 'title');
+    const isPinnable = layoutConfigTransitions.isPointerRevealMode(effectiveMode);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "layout-sidebar-header",
+                "data-scene-id": element.id,
+                children: [
+                    slots.logo,
+                    title && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "layout-sidebar-title",
+                        children: title
+                    }),
+                    isPinnable && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                        type: "button",
+                        text: true,
+                        rounded: true,
+                        icon: config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open',
+                        "aria-label": config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open',
+                        "aria-pressed": config.isSidebarAnchored,
+                        onClick: toggleSidebarAnchor
+                    })
+                ]
+            }),
+            slots.content
+        ]
+    });
+}
+
+exports.Sidebar = Sidebar;
+//# sourceMappingURL=Sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../shell/Sidebar.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 { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { isPointerRevealMode, useLayoutConfig } from '../configuration';\nimport { readString } from './elementProperties';\n\n/**\n * The sidebar's own chrome, inside the panel {@link AppShell} positions.\n *\n * The panel and its contents are deliberately different components. Everything about *where* the sidebar\n * is - translated off-canvas, collapsed to a rail, growing on hover - belongs to the mode and therefore to\n * the shell; everything about *what is in it* belongs to the screen. A template can replace this header\n * wholesale without any of the mode CSS noticing.\n *\n * The pin button only appears in `reveal` and `drawer`, the two modes where the sidebar answers to the\n * pointer and therefore needs a way to be made to stay.\n */\nexport function Sidebar({ element, slots }: RegisteredComponentProps) {\n    const { effectiveMode, config, toggleSidebarAnchor } = useLayoutConfig();\n    const title = readString(element, 'title');\n    const isPinnable = isPointerRevealMode(effectiveMode);\n\n    return (\n        <>\n            <div className='layout-sidebar-header' data-scene-id={element.id}>\n                {slots.logo}\n                {title && <span className='layout-sidebar-title'>{title}</span>}\n                {isPinnable && (\n                    <Button\n                        type='button'\n                        text\n                        rounded\n                        icon={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'}\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}\n                    />\n                )}\n            </div>\n            {slots.content}\n        </>\n    );\n}\n"],"names":["Sidebar","element","slots","effectiveMode","config","toggleSidebarAnchor","useLayoutConfig","title","readString","isPinnable","isPointerRevealMode","_jsxs","_Fragment","div","className","data-scene-id","id","logo","_jsx","span","Button","type","text","rounded","icon","isSidebarAnchored","aria-label","aria-pressed","onClick","content"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,OAAAA,CAAQ,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAChE,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,oCAAAA,EAAAA;IACvD,MAAMC,KAAAA,GAAQC,6BAAWP,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMQ,aAAaC,2CAAAA,CAAoBP,aAAAA,CAAAA;IAEvC,qBACIQ,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAed,QAAQe,EAAE;;AAC3Dd,oBAAAA,KAAAA,CAAMe,IAAI;AACVV,oBAAAA,KAAAA,kBAASW,cAAA,CAACC,MAAAA,EAAAA;wBAAKL,SAAAA,EAAU,sBAAA;AAAwBP,wBAAAA,QAAAA,EAAAA;;AACjDE,oBAAAA,UAAAA,kBACGS,cAAA,CAACE,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,IAAI,EAAA,IAAA;wBACJC,OAAO,EAAA,IAAA;wBACPC,IAAAA,EAAMpB,MAAAA,CAAOqB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;wBAChDC,YAAAA,EAAYtB,MAAAA,CAAOqB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DE,wBAAAA,cAAAA,EAAcvB,OAAOqB,iBAAiB;wBACtCG,OAAAA,EAASvB;;;;AAIpBH,YAAAA,KAAAA,CAAM2B;;;AAGnB;;;;"}

package/dist/cjs/shell/ThemeOption.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var ColorScheme = require('../configuration/ColorScheme.js');
+require('react/jsx-runtime');
+require('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.
+/**
+ * Reads the themes a switcher should offer out of an element's properties, falling back to the ones
+ * supplied by the host.
+ *
+ * A template says which themes it wants offered; a host that renders the shell with a different theme set
+ * passes those as the fallback. Neither has to know the other's list.
+ *
+ * @param element The element carrying an optional `themes` property - an array of `{ name, label, isDark }`.
+ * @param fallback The options to offer when the element names none.
+ * @returns The options to render.
+ */ function readThemeOptions(element, fallback) {
+    const declared = elementProperties.readRecords(element, 'themes').map((record)=>({
+            name: elementProperties.recordString(record, 'name'),
+            label: elementProperties.recordString(record, 'label') || elementProperties.recordString(record, 'name'),
+            colorScheme: record.isDark === true ? ColorScheme.ColorScheme.Dark : ColorScheme.ColorScheme.Light
+        }));
+    const named = declared.filter((option)=>option.name.length > 0);
+    return named.length > 0 ? named : fallback;
+}
+/**
+ * Turns the {@link Theme}s a package ships into switcher options, so a host offering its own themes and a
+ * host offering this package's use the same code path.
+ */ function themeOptionsFor(themes) {
+    return themes.map((theme)=>({
+            name: theme.name,
+            label: theme.name,
+            colorScheme: theme.isDark ? ColorScheme.ColorScheme.Dark : ColorScheme.ColorScheme.Light
+        }));
+}
+
+exports.readThemeOptions = readThemeOptions;
+exports.themeOptionsFor = themeOptionsFor;
+//# sourceMappingURL=ThemeOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeOption.js","sources":["../../../shell/ThemeOption.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, Theme } from '@cratis/scene.model';\nimport { ColorScheme } from '../configuration';\nimport { readRecords, recordString } from './elementProperties';\n\n/**\n * One entry a theme switcher offers.\n *\n * A switcher needs a name to record and a color scheme to record alongside it, but must not need the\n * theme's tokens - the tokens belong to whoever applies the theme, and a switcher that carried them would\n * force every page template to inline a full palette just to offer a choice.\n */\nexport interface ThemeOption {\n    /** The {@link Theme.name} to record when this option is chosen. */\n    name: string;\n\n    /** What to show on the button. */\n    label: string;\n\n    /** Which side of the light/dark axis choosing this option puts the shell on. */\n    colorScheme: ColorScheme;\n}\n\n/**\n * Reads the themes a switcher should offer out of an element's properties, falling back to the ones\n * supplied by the host.\n *\n * A template says which themes it wants offered; a host that renders the shell with a different theme set\n * passes those as the fallback. Neither has to know the other's list.\n *\n * @param element The element carrying an optional `themes` property - an array of `{ name, label, isDark }`.\n * @param fallback The options to offer when the element names none.\n * @returns The options to render.\n */\nexport function readThemeOptions(element: ExternalComponent, fallback: ThemeOption[]): ThemeOption[] {\n    const declared = readRecords(element, 'themes').map(\n        (record): ThemeOption => ({\n            name: recordString(record, 'name'),\n            label: recordString(record, 'label') || recordString(record, 'name'),\n            colorScheme: record.isDark === true ? ColorScheme.Dark : ColorScheme.Light,\n        }),\n    );\n\n    const named = declared.filter(option => option.name.length > 0);\n    return named.length > 0 ? named : fallback;\n}\n\n/**\n * Turns the {@link Theme}s a package ships into switcher options, so a host offering its own themes and a\n * host offering this package's use the same code path.\n */\nexport function themeOptionsFor(themes: Theme[]): ThemeOption[] {\n    return themes.map(theme => ({\n        name: theme.name,\n        label: theme.name,\n        colorScheme: theme.isDark ? ColorScheme.Dark : ColorScheme.Light,\n    }));\n}\n"],"names":["readThemeOptions","element","fallback","declared","readRecords","map","record","name","recordString","label","colorScheme","isDark","ColorScheme","Dark","Light","named","filter","option","length","themeOptionsFor","themes","theme"],"mappings":";;;;;;;AAAA;AACA;AAwBA;;;;;;;;;;AAUC,IACM,SAASA,gBAAAA,CAAiBC,OAA0B,EAAEC,QAAuB,EAAA;IAChF,MAAMC,QAAAA,GAAWC,8BAAYH,OAAAA,EAAS,QAAA,CAAA,CAAUI,GAAG,CAC/C,CAACC,UAAyB;AACtBC,YAAAA,IAAAA,EAAMC,+BAAaF,MAAAA,EAAQ,MAAA,CAAA;AAC3BG,YAAAA,KAAAA,EAAOD,8BAAAA,CAAaF,MAAAA,EAAQ,OAAA,CAAA,IAAYE,8BAAAA,CAAaF,MAAAA,EAAQ,MAAA,CAAA;YAC7DI,WAAAA,EAAaJ,MAAAA,CAAOK,MAAM,KAAK,IAAA,GAAOC,wBAAYC,IAAI,GAAGD,wBAAYE;SACzE,CAAA,CAAA;IAGJ,MAAMC,KAAAA,GAAQZ,QAAAA,CAASa,MAAM,CAACC,CAAAA,SAAUA,MAAAA,CAAOV,IAAI,CAACW,MAAM,GAAG,CAAA,CAAA;AAC7D,IAAA,OAAOH,KAAAA,CAAMG,MAAM,GAAG,CAAA,GAAIH,KAAAA,GAAQb,QAAAA;AACtC;AAEA;;;IAIO,SAASiB,eAAAA,CAAgBC,MAAe,EAAA;AAC3C,IAAA,OAAOA,MAAAA,CAAOf,GAAG,CAACgB,CAAAA,SAAU;AACxBd,YAAAA,IAAAA,EAAMc,MAAMd,IAAI;AAChBE,YAAAA,KAAAA,EAAOY,MAAMd,IAAI;AACjBG,YAAAA,WAAAA,EAAaW,MAAMV,MAAM,GAAGC,wBAAYC,IAAI,GAAGD,wBAAYE;SAC/D,CAAA,CAAA;AACJ;;;;;"}

package/dist/cjs/shell/ThemeSwitcher.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var defaultBlueprintThemes = require('../themes/defaultBlueprintThemes.js');
+require('react');
+require('@cratis/scene.react');
+var elementProperties = require('./elementProperties.js');
+var ThemeOption = require('./ThemeOption.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Switches between the themes a host offers.
+ *
+ * It records a name and a color scheme and nothing else - {@link LayoutThemeProvider} resolves the name
+ * against the real theme set. That split is what makes switching live: the tokens are rewritten on the
+ * element that already exists, so nothing below remounts and no form loses what was typed into it.
+ */ function ThemeSwitcher({ element }) {
+    const { config, setThemeName, setColorScheme } = LayoutConfigProvider.useLayoutConfig();
+    const label = elementProperties.readString(element, 'label', 'Theme');
+    const options = ThemeOption.readThemeOptions(element, ThemeOption.themeOptionsFor(defaultBlueprintThemes.defaultBlueprintThemes));
+    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: options.map((option)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        className: "layout-config-option",
+                        "aria-pressed": config.themeName === option.name,
+                        onClick: ()=>{
+                            setThemeName(option.name);
+                            setColorScheme(option.colorScheme);
+                        },
+                        children: option.label
+                    }, option.name))
+            })
+        ]
+    });
+}
+
+exports.ThemeSwitcher = ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.js","sources":["../../../shell/ThemeSwitcher.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 { useLayoutConfig } from '../configuration';\nimport { defaultBlueprintThemes } from '../themes';\nimport { readString } from './elementProperties';\nimport { readThemeOptions, themeOptionsFor } from './ThemeOption';\n\n/**\n * Switches between the themes a host offers.\n *\n * It records a name and a color scheme and nothing else - {@link LayoutThemeProvider} resolves the name\n * against the real theme set. That split is what makes switching live: the tokens are rewritten on the\n * element that already exists, so nothing below remounts and no form loses what was typed into it.\n */\nexport function ThemeSwitcher({ element }: RegisteredComponentProps) {\n    const { config, setThemeName, setColorScheme } = useLayoutConfig();\n    const label = readString(element, 'label', 'Theme');\n    const options = readThemeOptions(element, themeOptionsFor(defaultBlueprintThemes));\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                {options.map(option => (\n                    <button\n                        key={option.name}\n                        type='button'\n                        className='layout-config-option'\n                        aria-pressed={config.themeName === option.name}\n                        onClick={() => {\n                            setThemeName(option.name);\n                            setColorScheme(option.colorScheme);\n                        }}>\n                        {option.label}\n                    </button>\n                ))}\n            </div>\n        </div>\n    );\n}\n"],"names":["ThemeSwitcher","element","config","setThemeName","setColorScheme","useLayoutConfig","label","readString","options","readThemeOptions","themeOptionsFor","defaultBlueprintThemes","_jsxs","div","data-scene-id","id","_jsx","h3","className","role","aria-label","map","option","button","type","aria-pressed","themeName","name","onClick","colorScheme"],"mappings":";;;;;;;;;;AAAA;AACA;AAQA;;;;;;AAMC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAA4B,EAAA;AAC/D,IAAA,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAE,GAAGC,oCAAAA,EAAAA;IACjD,MAAMC,KAAAA,GAAQC,4BAAAA,CAAWN,OAAAA,EAAS,OAAA,EAAS,OAAA,CAAA;IAC3C,MAAMO,OAAAA,GAAUC,4BAAAA,CAAiBR,OAAAA,EAASS,2BAAAA,CAAgBC,6CAAAA,CAAAA,CAAAA;AAE1D,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;;0BAC1BC,cAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,6BAAA;AAA+BZ,gBAAAA,QAAAA,EAAAA;;0BAC7CU,cAAA,CAACH,KAAAA,EAAAA;gBAAIK,SAAAA,EAAU,uBAAA;gBAAwBC,IAAAA,EAAK,OAAA;gBAAQC,YAAAA,EAAYd,KAAAA;AAC3DE,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQa,GAAG,CAACC,CAAAA,MAAAA,iBACTN,cAAA,CAACO,QAAAA,EAAAA;wBAEGC,IAAAA,EAAK,QAAA;wBACLN,SAAAA,EAAU,sBAAA;AACVO,wBAAAA,cAAAA,EAAcvB,MAAAA,CAAOwB,SAAS,KAAKJ,MAAAA,CAAOK,IAAI;wBAC9CC,OAAAA,EAAS,IAAA;AACLzB,4BAAAA,YAAAA,CAAamB,OAAOK,IAAI,CAAA;AACxBvB,4BAAAA,cAAAA,CAAekB,OAAOO,WAAW,CAAA;AACrC,wBAAA,CAAA;AACCP,wBAAAA,QAAAA,EAAAA,MAAAA,CAAOhB;AARHgB,qBAAAA,EAAAA,MAAAA,CAAOK,IAAI,CAAA;;;;AAcxC;;;;"}

package/dist/cjs/shell/Topbar.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('primereact/button');
+var LayoutMode = require('../configuration/LayoutMode.js');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var elementProperties = require('./elementProperties.js');
+
+/**
+ * The fixed strip across the top of the application shell.
+ *
+ * It owns the one control every mode needs: the sidebar toggle. In `horizontal` mode it also hosts the
+ * menu itself, which is why the menu arrives here as a slot rather than being hard-wired into the
+ * sidebar - the same navigation markup has to be able to render in two places.
+ *
+ * The toggle hides itself in the rail modes, where there is nothing to toggle: `slim`, `slim-plus` and
+ * `compact` are always showing, `reveal` and `drawer` answer to the pointer and the pin, and `horizontal`
+ * has no sidebar at all. A button that does nothing is worse than no button.
+ */ function Topbar({ element, slots }) {
+    const { effectiveMode, config, toggleSidebar } = LayoutConfigProvider.useLayoutConfig();
+    const showsToggle = elementProperties.readBoolean(element, 'showToggle', true) && togglesSidebar(effectiveMode);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "layout-topbar-start",
+                "data-scene-id": element.id,
+                children: [
+                    showsToggle && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                        type: "button",
+                        text: true,
+                        rounded: true,
+                        icon: "pi pi-bars",
+                        "aria-label": config.isSidebarOpen ? 'Close the menu' : 'Open the menu',
+                        "aria-expanded": config.isSidebarOpen,
+                        onClick: toggleSidebar
+                    }),
+                    slots.logo,
+                    slots.start
+                ]
+            }),
+            slots.menu,
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "layout-topbar-end",
+                children: slots.end
+            })
+        ]
+    });
+}
+function togglesSidebar(mode) {
+    return mode === LayoutMode.LayoutMode.Static || mode === LayoutMode.LayoutMode.Overlay;
+}
+
+exports.Topbar = Topbar;
+//# sourceMappingURL=Topbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Topbar.js","sources":["../../../shell/Topbar.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 { Button } from 'primereact/button';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { LayoutMode, useLayoutConfig } from '../configuration';\nimport { readBoolean } from './elementProperties';\n\n/**\n * The fixed strip across the top of the application shell.\n *\n * It owns the one control every mode needs: the sidebar toggle. In `horizontal` mode it also hosts the\n * menu itself, which is why the menu arrives here as a slot rather than being hard-wired into the\n * sidebar - the same navigation markup has to be able to render in two places.\n *\n * The toggle hides itself in the rail modes, where there is nothing to toggle: `slim`, `slim-plus` and\n * `compact` are always showing, `reveal` and `drawer` answer to the pointer and the pin, and `horizontal`\n * has no sidebar at all. A button that does nothing is worse than no button.\n */\nexport function Topbar({ element, slots }: RegisteredComponentProps) {\n    const { effectiveMode, config, toggleSidebar } = useLayoutConfig();\n    const showsToggle = readBoolean(element, 'showToggle', true) && togglesSidebar(effectiveMode);\n\n    return (\n        <>\n            <div className='layout-topbar-start' data-scene-id={element.id}>\n                {showsToggle && (\n                    <Button\n                        type='button'\n                        text\n                        rounded\n                        icon='pi pi-bars'\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}\n                    />\n                )}\n                {slots.logo}\n                {slots.start}\n            </div>\n            {slots.menu}\n            <div className='layout-topbar-end'>{slots.end}</div>\n        </>\n    );\n}\n\nfunction togglesSidebar(mode: LayoutMode): boolean {\n    return mode === LayoutMode.Static || mode === LayoutMode.Overlay;\n}\n"],"names":["Topbar","element","slots","effectiveMode","config","toggleSidebar","useLayoutConfig","showsToggle","readBoolean","togglesSidebar","_jsxs","_Fragment","div","className","data-scene-id","id","_jsx","Button","type","text","rounded","icon","aria-label","isSidebarOpen","aria-expanded","onClick","logo","start","menu","end","mode","LayoutMode","Static","Overlay"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC/D,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,aAAa,EAAE,GAAGC,oCAAAA,EAAAA;AACjD,IAAA,MAAMC,WAAAA,GAAcC,6BAAAA,CAAYP,OAAAA,EAAS,YAAA,EAAc,SAASQ,cAAAA,CAAeN,aAAAA,CAAAA;IAE/E,qBACIO,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAeb,QAAQc,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,cAAA,CAACC,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,IAAI,EAAA,IAAA;wBACJC,OAAO,EAAA,IAAA;wBACPC,IAAAA,EAAK,YAAA;wBACLC,YAAAA,EAAYlB,MAAAA,CAAOmB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAepB,OAAOmB,aAAa;wBACnCE,OAAAA,EAASpB;;AAGhBH,oBAAAA,KAAAA,CAAMwB,IAAI;AACVxB,oBAAAA,KAAAA,CAAMyB;;;AAEVzB,YAAAA,KAAAA,CAAM0B,IAAI;0BACXZ,cAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM2B;;;;AAGtD;AAEA,SAASpB,eAAeqB,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,qBAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,sBAAWE,OAAO;AACpE;;;;"}

package/dist/cjs/shell/UserMenu.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var avatar = require('primereact/avatar');
+var button = require('primereact/button');
+var menu = require('primereact/menu');
+var elementProperties = require('./elementProperties.js');
+
+/**
+ * The signed-in user's avatar and menu.
+ *
+ * The popup is PrimeReact's `Menu` rather than hand-written markup: an overlay that positions itself,
+ * traps focus and closes on escape is framework behavior, and re-implementing it in a layout package is
+ * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact 10
+ * has no primitive at all - the app-shell modes - and uses the library everywhere else.
+ */ function UserMenu({ element }) {
+    const menu$1 = react.useRef(null);
+    const name = elementProperties.readString(element, 'name');
+    const role = elementProperties.readString(element, 'role');
+    const initials = elementProperties.readString(element, 'initials', name.slice(0, 1).toUpperCase());
+    const items = elementProperties.readRecords(element, 'items').map((item)=>({
+            label: elementProperties.recordString(item, 'label'),
+            icon: elementProperties.recordString(item, 'icon') || undefined,
+            url: elementProperties.recordString(item, 'targetScreen') ? `#/${elementProperties.recordString(item, 'targetScreen')}` : undefined
+        }));
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "layout-user-menu",
+        "data-scene-id": element.id,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar, {
+                label: initials,
+                shape: "circle"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                className: "layout-user-menu-name",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        children: name
+                    }),
+                    role && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "layout-user-menu-role",
+                        children: role
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(menu.Menu, {
+                ref: menu$1,
+                model: items,
+                popup: true,
+                id: `${element.id}-menu`
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                type: "button",
+                text: true,
+                rounded: true,
+                icon: "pi pi-angle-down",
+                "aria-label": `Open the menu for ${name}`,
+                "aria-controls": `${element.id}-menu`,
+                "aria-haspopup": true,
+                onClick: (event)=>menu$1.current?.toggle(event)
+            })
+        ]
+    });
+}
+
+exports.UserMenu = UserMenu;
+//# sourceMappingURL=UserMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.js","sources":["../../../shell/UserMenu.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 { useRef } from 'react';\nimport { Avatar } from 'primereact/avatar';\nimport { Button } from 'primereact/button';\nimport { Menu as PrimeMenu } from 'primereact/menu';\nimport { MenuItem as PrimeMenuItem } from 'primereact/menuitem';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readRecords, readString, recordString } from './elementProperties';\n\n/**\n * The signed-in user's avatar and menu.\n *\n * The popup is PrimeReact's `Menu` rather than hand-written markup: an overlay that positions itself,\n * traps focus and closes on escape is framework behavior, and re-implementing it in a layout package is\n * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact 10\n * has no primitive at all - the app-shell modes - and uses the library everywhere else.\n */\nexport function UserMenu({ element }: RegisteredComponentProps) {\n    const menu = useRef<PrimeMenu>(null);\n    const name = readString(element, 'name');\n    const role = readString(element, 'role');\n    const initials = readString(element, 'initials', name.slice(0, 1).toUpperCase());\n    const items = readRecords(element, 'items').map(\n        (item): PrimeMenuItem => ({\n            label: recordString(item, 'label'),\n            icon: recordString(item, 'icon') || undefined,\n            url: recordString(item, 'targetScreen') ? `#/${recordString(item, 'targetScreen')}` : undefined,\n        }),\n    );\n\n    return (\n        <div className='layout-user-menu' data-scene-id={element.id}>\n            <Avatar label={initials} shape='circle' />\n            <span className='layout-user-menu-name'>\n                <span>{name}</span>\n                {role && <span className='layout-user-menu-role'>{role}</span>}\n            </span>\n            <PrimeMenu ref={menu} model={items} popup id={`${element.id}-menu`} />\n            <Button\n                type='button'\n                text\n                rounded\n                icon='pi pi-angle-down'\n                aria-label={`Open the menu for ${name}`}\n                aria-controls={`${element.id}-menu`}\n                aria-haspopup\n                onClick={event => menu.current?.toggle(event)}\n            />\n        </div>\n    );\n}\n"],"names":["UserMenu","element","menu","useRef","name","readString","role","initials","slice","toUpperCase","items","readRecords","map","item","label","recordString","icon","undefined","url","_jsxs","div","className","data-scene-id","id","_jsx","Avatar","shape","span","PrimeMenu","ref","model","popup","Button","type","text","rounded","aria-label","aria-controls","aria-haspopup","onClick","event","current","toggle"],"mappings":";;;;;;;;;AAWA;;;;;;;AAOC,IACM,SAASA,QAAAA,CAAS,EAAEC,OAAO,EAA4B,EAAA;AAC1D,IAAA,MAAMC,SAAOC,YAAAA,CAAkB,IAAA,CAAA;IAC/B,MAAMC,IAAAA,GAAOC,6BAAWJ,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMK,IAAAA,GAAOD,6BAAWJ,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMM,QAAAA,GAAWF,6BAAWJ,OAAAA,EAAS,UAAA,EAAYG,KAAKI,KAAK,CAAC,CAAA,EAAG,CAAA,CAAA,CAAGC,WAAW,EAAA,CAAA;IAC7E,MAAMC,KAAAA,GAAQC,8BAAYV,OAAAA,EAAS,OAAA,CAAA,CAASW,GAAG,CAC3C,CAACC,QAAyB;AACtBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,IAAAA,EAAMD,8BAAAA,CAAaF,MAAM,MAAA,CAAA,IAAWI,SAAAA;YACpCC,GAAAA,EAAKH,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIE,eAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,kBAAA;AAAmBC,QAAAA,eAAAA,EAAerB,QAAQsB,EAAE;;0BACvDC,cAAA,CAACC,aAAAA,EAAAA;gBAAOX,KAAAA,EAAOP,QAAAA;gBAAUmB,KAAAA,EAAM;;0BAC/BP,eAAA,CAACQ,MAAAA,EAAAA;gBAAKN,SAAAA,EAAU,uBAAA;;kCACZG,cAAA,CAACG,MAAAA,EAAAA;AAAMvB,wBAAAA,QAAAA,EAAAA;;AACNE,oBAAAA,IAAAA,kBAAQkB,cAAA,CAACG,MAAAA,EAAAA;wBAAKN,SAAAA,EAAU,uBAAA;AAAyBf,wBAAAA,QAAAA,EAAAA;;;;0BAEtDkB,cAAA,CAACI,SAAAA,EAAAA;gBAAUC,GAAAA,EAAK3B,MAAAA;gBAAM4B,KAAAA,EAAOpB,KAAAA;gBAAOqB,KAAK,EAAA,IAAA;AAACR,gBAAAA,EAAAA,EAAI,CAAA,EAAGtB,OAAAA,CAAQsB,EAAE,CAAC,KAAK;;0BACjEC,cAAA,CAACQ,aAAAA,EAAAA;gBACGC,IAAAA,EAAK,QAAA;gBACLC,IAAI,EAAA,IAAA;gBACJC,OAAO,EAAA,IAAA;gBACPnB,IAAAA,EAAK,kBAAA;gBACLoB,YAAAA,EAAY,CAAC,kBAAkB,EAAEhC,IAAAA,CAAAA,CAAM;AACvCiC,gBAAAA,eAAAA,EAAe,CAAA,EAAGpC,OAAAA,CAAQsB,EAAE,CAAC,KAAK,CAAC;gBACnCe,eAAa,EAAA,IAAA;AACbC,gBAAAA,OAAAA,EAASC,CAAAA,KAAAA,GAAStC,MAAAA,CAAKuC,OAAO,EAAEC,MAAAA,CAAOF,KAAAA;;;;AAIvD;;;;"}

package/dist/cjs/shell/elementProperties.js

@@ -0,0 +1,56 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Typed reads out of a {@link SceneElement}'s open `properties` bag.
+ *
+ * The bag is `Record<string, unknown>` by design - it carries whatever a page template author wrote, and
+ * Scene never re-validates it. A shell component that trusts it and reads `properties.label as string`
+ * renders `[object Object]` or crashes the moment a template has a typo, so every read goes through one of
+ * these instead and falls back to something renderable.
+ */ /** Reads a string property, or the fallback when it is absent or not a string. */ function readString(element, name, fallback = '') {
+    const value = element.properties[name];
+    return typeof value === 'string' ? value : fallback;
+}
+/** Reads an optional string property, or `undefined` when it is absent or not a string. */ function readOptionalString(element, name) {
+    const value = element.properties[name];
+    return typeof value === 'string' ? value : undefined;
+}
+/** Reads a boolean property, or the fallback when it is absent or not a boolean. */ function readBoolean(element, name, fallback = false) {
+    const value = element.properties[name];
+    return typeof value === 'boolean' ? value : fallback;
+}
+/** Reads a number property, or the fallback when it is absent or not a number. */ function readNumber(element, name, fallback = 0) {
+    const value = element.properties[name];
+    return typeof value === 'number' ? value : fallback;
+}
+/** Reads an array of strings, or an empty array when the property is absent or holds anything else. */ function readStrings(element, name) {
+    const value = element.properties[name];
+    return Array.isArray(value) ? value.filter((entry)=>typeof entry === 'string') : [];
+}
+/**
+ * Reads an array of objects - a breadcrumb trail, a set of table columns, a user menu's items.
+ *
+ * Entries that are not objects are dropped rather than rendered, for the same reason the scalar reads
+ * fall back: half a table is a better failure than a thrown render.
+ */ function readRecords(element, name) {
+    const value = element.properties[name];
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter((entry)=>typeof entry === 'object' && entry !== null && !Array.isArray(entry));
+}
+/** Reads a string out of one of {@link readRecords}' entries. */ function recordString(record, name, fallback = '') {
+    const value = record[name];
+    return typeof value === 'string' ? value : fallback;
+}
+
+exports.readBoolean = readBoolean;
+exports.readNumber = readNumber;
+exports.readOptionalString = readOptionalString;
+exports.readRecords = readRecords;
+exports.readString = readString;
+exports.readStrings = readStrings;
+exports.recordString = recordString;
+//# sourceMappingURL=elementProperties.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementProperties.js","sources":["../../../shell/elementProperties.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 } from '@cratis/scene.model';\n\n/**\n * Typed reads out of a {@link SceneElement}'s open `properties` bag.\n *\n * The bag is `Record<string, unknown>` by design - it carries whatever a page template author wrote, and\n * Scene never re-validates it. A shell component that trusts it and reads `properties.label as string`\n * renders `[object Object]` or crashes the moment a template has a typo, so every read goes through one of\n * these instead and falls back to something renderable.\n */\n\n/** Reads a string property, or the fallback when it is absent or not a string. */\nexport function readString(element: ExternalComponent, name: string, fallback = ''): string {\n    const value = element.properties[name];\n    return typeof value === 'string' ? value : fallback;\n}\n\n/** Reads an optional string property, or `undefined` when it is absent or not a string. */\nexport function readOptionalString(element: ExternalComponent, name: string): string | undefined {\n    const value = element.properties[name];\n    return typeof value === 'string' ? value : undefined;\n}\n\n/** Reads a boolean property, or the fallback when it is absent or not a boolean. */\nexport function readBoolean(element: ExternalComponent, name: string, fallback = false): boolean {\n    const value = element.properties[name];\n    return typeof value === 'boolean' ? value : fallback;\n}\n\n/** Reads a number property, or the fallback when it is absent or not a number. */\nexport function readNumber(element: ExternalComponent, name: string, fallback = 0): number {\n    const value = element.properties[name];\n    return typeof value === 'number' ? value : fallback;\n}\n\n/** Reads an array of strings, or an empty array when the property is absent or holds anything else. */\nexport function readStrings(element: ExternalComponent, name: string): string[] {\n    const value = element.properties[name];\n    return Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : [];\n}\n\n/**\n * Reads an array of objects - a breadcrumb trail, a set of table columns, a user menu's items.\n *\n * Entries that are not objects are dropped rather than rendered, for the same reason the scalar reads\n * fall back: half a table is a better failure than a thrown render.\n */\nexport function readRecords(element: ExternalComponent, name: string): Record<string, unknown>[] {\n    const value = element.properties[name];\n    if (!Array.isArray(value)) {\n        return [];\n    }\n\n    return value.filter((entry): entry is Record<string, unknown> => typeof entry === 'object' && entry !== null && !Array.isArray(entry));\n}\n\n/** Reads a string out of one of {@link readRecords}' entries. */\nexport function recordString(record: Record<string, unknown>, name: string, fallback = ''): string {\n    const value = record[name];\n    return typeof value === 'string' ? value : fallback;\n}\n"],"names":["readString","element","name","fallback","value","properties","readOptionalString","undefined","readBoolean","readNumber","readStrings","Array","isArray","filter","entry","readRecords","recordString","record"],"mappings":";;AAAA;AACA;AAIA;;;;;;;uFAUO,SAASA,UAAAA,CAAWC,OAA0B,EAAEC,IAAY,EAAEC,QAAAA,GAAW,EAAE,EAAA;AAC9E,IAAA,MAAMC,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;IACtC,OAAO,OAAOE,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQD,QAAAA;AAC/C;AAEA,4FACO,SAASG,kBAAAA,CAAmBL,OAA0B,EAAEC,IAAY,EAAA;AACvE,IAAA,MAAME,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;IACtC,OAAO,OAAOE,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQG,SAAAA;AAC/C;AAEA,qFACO,SAASC,WAAAA,CAAYP,OAA0B,EAAEC,IAAY,EAAEC,QAAAA,GAAW,KAAK,EAAA;AAClF,IAAA,MAAMC,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;IACtC,OAAO,OAAOE,KAAAA,KAAU,SAAA,GAAYA,KAAAA,GAAQD,QAAAA;AAChD;AAEA,mFACO,SAASM,UAAAA,CAAWR,OAA0B,EAAEC,IAAY,EAAEC,QAAAA,GAAW,CAAC,EAAA;AAC7E,IAAA,MAAMC,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;IACtC,OAAO,OAAOE,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQD,QAAAA;AAC/C;AAEA,wGACO,SAASO,WAAAA,CAAYT,OAA0B,EAAEC,IAAY,EAAA;AAChE,IAAA,MAAME,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;AACtC,IAAA,OAAOS,KAAAA,CAAMC,OAAO,CAACR,KAAAA,CAAAA,GAASA,KAAAA,CAAMS,MAAM,CAAC,CAACC,KAAAA,GAA2B,OAAOA,KAAAA,KAAU,QAAA,CAAA,GAAY,EAAE;AAC1G;AAEA;;;;;AAKC,IACM,SAASC,WAAAA,CAAYd,OAA0B,EAAEC,IAAY,EAAA;AAChE,IAAA,MAAME,KAAAA,GAAQH,OAAAA,CAAQI,UAAU,CAACH,IAAAA,CAAK;AACtC,IAAA,IAAI,CAACS,KAAAA,CAAMC,OAAO,CAACR,KAAAA,CAAAA,EAAQ;AACvB,QAAA,OAAO,EAAE;AACb,IAAA;AAEA,IAAA,OAAOA,KAAAA,CAAMS,MAAM,CAAC,CAACC,KAAAA,GAA4C,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAU,IAAA,IAAQ,CAACH,KAAAA,CAAMC,OAAO,CAACE,KAAAA,CAAAA,CAAAA;AACnI;AAEA,kEACO,SAASE,YAAAA,CAAaC,MAA+B,EAAEf,IAAY,EAAEC,QAAAA,GAAW,EAAE,EAAA;IACrF,MAAMC,KAAAA,GAAQa,MAAM,CAACf,IAAAA,CAAK;IAC1B,OAAO,OAAOE,KAAAA,KAAU,QAAA,GAAWA,KAAAA,GAAQD,QAAAA;AAC/C;;;;;;;;;;"}