@cratis/scene.blueprint.default 0.1.0

package/dist/esm/shell/Logo.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSceneTheme } from '@cratis/scene.react';
+import { readString, readOptionalString } from './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 = useSceneTheme();
+    const label = readString(element, 'label', 'Cratis');
+    const initials = readString(element, 'initials', label.slice(0, 1).toUpperCase());
+    const lightSource = readOptionalString(element, 'lightImageUrl');
+    const darkSource = readOptionalString(element, 'darkImageUrl');
+    const source = theme?.isDark ? darkSource ?? lightSource : lightSource ?? darkSource;
+    const targetScreen = readString(element, 'targetScreen', 'Dashboard');
+    return /*#__PURE__*/ jsxs("a", {
+        className: "layout-logo",
+        href: `#/${targetScreen}`,
+        "data-scene-id": element.id,
+        children: [
+            source ? /*#__PURE__*/ jsx("img", {
+                src: source,
+                alt: label,
+                height: 28
+            }) : /*#__PURE__*/ jsx("span", {
+                className: "layout-logo-mark",
+                children: initials
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            })
+        ]
+    });
+}
+
+export { Logo };
+//# sourceMappingURL=Logo.js.map

package/dist/esm/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,aAAAA,EAAAA;IACd,MAAMC,KAAAA,GAAQC,UAAAA,CAAWJ,OAAAA,EAAS,OAAA,EAAS,QAAA,CAAA;IAC3C,MAAMK,QAAAA,GAAWD,WAAWJ,OAAAA,EAAS,UAAA,EAAYG,MAAMG,KAAK,CAAC,CAAA,EAAG,CAAA,CAAA,CAAGC,WAAW,EAAA,CAAA;IAC9E,MAAMC,WAAAA,GAAcC,mBAAmBT,OAAAA,EAAS,eAAA,CAAA;IAChD,MAAMU,UAAAA,GAAaD,mBAAmBT,OAAAA,EAAS,cAAA,CAAA;AAC/C,IAAA,MAAMW,MAAAA,GAASV,KAAAA,EAAOW,MAAAA,GAASF,UAAAA,IAAcF,cAAcA,WAAAA,IAAeE,UAAAA;IAC1E,MAAMG,YAAAA,GAAeT,UAAAA,CAAWJ,OAAAA,EAAS,cAAA,EAAgB,WAAA,CAAA;AAEzD,IAAA,qBACIc,IAAA,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,GAAA,CAACC,KAAAA,EAAAA;gBAAIC,GAAAA,EAAKX,MAAAA;gBAAQY,GAAAA,EAAKpB,KAAAA;gBAAOqB,MAAAA,EAAQ;+BAASJ,GAAA,CAACK,MAAAA,EAAAA;gBAAKT,SAAAA,EAAU,kBAAA;AAAoBX,gBAAAA,QAAAA,EAAAA;;0BAC7Fe,GAAA,CAACK,MAAAA,EAAAA;AAAMtB,gBAAAA,QAAAA,EAAAA;;;;AAGnB;;;;"}

package/dist/esm/shell/Mask.d.ts

@@ -0,0 +1,3 @@
+export declare function LayoutMask(): import("react").JSX.Element | undefined;
+export declare function Mask(): import("react").JSX.Element;
+//# sourceMappingURL=Mask.d.ts.map

package/dist/esm/shell/Mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../shell/Mask.tsx"],"names":[],"mappings":"AAaA,wBAAgB,UAAU,4CAOzB;AAMD,wBAAgB,IAAI,gCAEnB"}

package/dist/esm/shell/Mask.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLayoutConfig } from '../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 } = useLayoutConfig();
+    if (!isMaskVisible) {
+        return undefined;
+    }
+    return /*#__PURE__*/ 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__*/ jsx(LayoutMask, {});
+}
+
+export { LayoutMask, Mask };
+//# sourceMappingURL=Mask.js.map

package/dist/esm/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,eAAAA,EAAAA;AAC1C,IAAA,IAAI,CAACF,aAAAA,EAAe;QAChB,OAAOG,SAAAA;AACX,IAAA;AAEA,IAAA,qBAAOC,GAAA,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,GAAA,CAACL,UAAAA,EAAAA,EAAAA,CAAAA;AACZ;;;;"}

package/dist/esm/shell/Menu.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function Menu({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/esm/shell/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../shell/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAY/D,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAUhE"}

package/dist/esm/shell/Menu.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { readString } from './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 = readString(element, 'title');
+    const label = readString(element, 'label', 'Main');
+    return /*#__PURE__*/ jsxs("nav", {
+        "data-scene-id": element.id,
+        "aria-label": label,
+        children: [
+            title && /*#__PURE__*/ jsx("div", {
+                className: "layout-menu-section-title",
+                children: title
+            }),
+            /*#__PURE__*/ jsx("ul", {
+                className: "layout-menu",
+                children: slots.items
+            })
+        ]
+    });
+}
+
+export { Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/esm/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,WAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,KAAAA,GAAQD,UAAAA,CAAWH,OAAAA,EAAS,OAAA,EAAS,MAAA,CAAA;AAE3C,IAAA,qBACIK,IAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEC,YAAAA,EAAYL,KAAAA;;AACvCF,YAAAA,KAAAA,kBAASQ,GAAA,CAACC,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,2BAAA;AAA6BV,gBAAAA,QAAAA,EAAAA;;0BACtDQ,GAAA,CAACG,IAAAA,EAAAA;gBAAGD,SAAAA,EAAU,aAAA;AAAeX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;;;AAG/C;;;;"}

package/dist/esm/shell/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function MenuItem({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/esm/shell/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../shell/MenuItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAgB/D,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAmBpE"}

package/dist/esm/shell/MenuItem.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { readString, readOptionalString, readBoolean } from './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 = readString(element, 'label');
+    const icon = readOptionalString(element, 'icon');
+    const badge = readOptionalString(element, 'badge');
+    const targetScreen = readOptionalString(element, 'targetScreen');
+    const isActive = readBoolean(element, 'isActive');
+    const hasSubmenu = (slots.items?.length ?? 0) > 0;
+    return /*#__PURE__*/ jsxs("li", {
+        className: "layout-menu-item",
+        "data-scene-id": element.id,
+        "data-active": isActive,
+        "data-target-screen": targetScreen,
+        children: [
+            /*#__PURE__*/ jsxs("a", {
+                className: "layout-menu-link",
+                href: targetScreen ? `#/${targetScreen}` : undefined,
+                "aria-current": isActive ? 'page' : undefined,
+                children: [
+                    icon && /*#__PURE__*/ jsx("i", {
+                        className: `layout-menu-icon ${icon}`,
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "layout-menu-label",
+                        children: label
+                    }),
+                    badge && /*#__PURE__*/ jsx("span", {
+                        className: "layout-menu-badge",
+                        children: badge
+                    }),
+                    hasSubmenu && /*#__PURE__*/ jsx("i", {
+                        className: "pi pi-angle-down",
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+            hasSubmenu && /*#__PURE__*/ jsx("ul", {
+                className: "layout-submenu",
+                children: slots.items
+            })
+        ]
+    });
+}
+
+export { MenuItem };
+//# sourceMappingURL=MenuItem.js.map

package/dist/esm/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,WAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,IAAAA,GAAOC,mBAAmBL,OAAAA,EAAS,MAAA,CAAA;IACzC,MAAMM,KAAAA,GAAQD,mBAAmBL,OAAAA,EAAS,OAAA,CAAA;IAC1C,MAAMO,YAAAA,GAAeF,mBAAmBL,OAAAA,EAAS,cAAA,CAAA;IACjD,MAAMQ,QAAAA,GAAWC,YAAYT,OAAAA,EAAS,UAAA,CAAA;IACtC,MAAMU,UAAAA,GAAa,CAACT,KAAAA,CAAMU,KAAK,EAAEC,MAAAA,IAAU,CAAA,IAAK,CAAA;AAEhD,IAAA,qBACIC,IAAA,CAACC,IAAAA,EAAAA;QAAGC,SAAAA,EAAU,kBAAA;AAAmBC,QAAAA,eAAAA,EAAehB,QAAQiB,EAAE;QAAEC,aAAAA,EAAaV,QAAAA;QAAUW,oBAAAA,EAAoBZ,YAAAA;;0BACnGM,IAAA,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,GAAA,CAACC,GAAAA,EAAAA;wBAAEV,SAAAA,EAAW,CAAC,iBAAiB,EAAEX,IAAAA,CAAAA,CAAM;wBAAEsB,aAAAA,EAAY;;kCAC/DF,GAAA,CAACG,MAAAA,EAAAA;wBAAKZ,SAAAA,EAAU,mBAAA;AAAqBb,wBAAAA,QAAAA,EAAAA;;AACpCI,oBAAAA,KAAAA,kBAASkB,GAAA,CAACG,MAAAA,EAAAA;wBAAKZ,SAAAA,EAAU,mBAAA;AAAqBT,wBAAAA,QAAAA,EAAAA;;AAC9CI,oBAAAA,UAAAA,kBAAcc,GAAA,CAACC,GAAAA,EAAAA;wBAAEV,SAAAA,EAAU,kBAAA;wBAAmBW,aAAAA,EAAY;;;;AAE9DhB,YAAAA,UAAAA,kBAAcc,GAAA,CAACI,IAAAA,EAAAA;gBAAGb,SAAAA,EAAU,gBAAA;AAAkBd,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMU;;;;AAGjE;;;;"}

package/dist/esm/shell/PageHeader.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function PageHeader({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/esm/shell/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../shell/PageHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAW/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAatE"}

package/dist/esm/shell/PageHeader.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { readString } from './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 = readString(element, 'title');
+    const subtitle = readString(element, 'subtitle');
+    return /*#__PURE__*/ jsxs("div", {
+        className: "layout-page-header",
+        "data-scene-id": element.id,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("h1", {
+                        className: "layout-page-header-title",
+                        children: title
+                    }),
+                    subtitle && /*#__PURE__*/ jsx("p", {
+                        className: "layout-page-header-subtitle",
+                        children: subtitle
+                    })
+                ]
+            }),
+            (slots.actions?.length ?? 0) > 0 && /*#__PURE__*/ jsx("div", {
+                className: "layout-page-header-actions",
+                children: slots.actions
+            })
+        ]
+    });
+}
+
+export { PageHeader };
+//# sourceMappingURL=PageHeader.js.map

package/dist/esm/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,WAAWH,OAAAA,EAAS,OAAA,CAAA;IAClC,MAAMI,QAAAA,GAAWD,WAAWH,OAAAA,EAAS,UAAA,CAAA;AAErC,IAAA,qBACIK,IAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,oBAAA;AAAqBC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;;0BACzDJ,IAAA,CAACC,KAAAA,EAAAA;;kCACGI,GAAA,CAACC,IAAAA,EAAAA;wBAAGJ,SAAAA,EAAU,0BAAA;AAA4BL,wBAAAA,QAAAA,EAAAA;;AACzCE,oBAAAA,QAAAA,kBAAYM,GAAA,CAACE,GAAAA,EAAAA;wBAAEL,SAAAA,EAAU,6BAAA;AAA+BH,wBAAAA,QAAAA,EAAAA;;;;AAE3DH,YAAAA,CAAAA,MAAMY,OAAO,EAAEC,UAAU,CAAA,IAAK,mBAAKJ,GAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,4BAAA;AAA8BN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMY;;;;AAGpG;;;;"}

package/dist/esm/shell/RightPanel.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function RightPanel({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=RightPanel.d.ts.map

package/dist/esm/shell/RightPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.d.ts","sourceRoot":"","sources":["../../../shell/RightPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAU/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAStE"}

package/dist/esm/shell/RightPanel.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { readString } from './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 = readString(element, 'title');
+    return /*#__PURE__*/ jsxs("section", {
+        "data-scene-id": element.id,
+        "aria-label": title || 'Panel',
+        children: [
+            title && /*#__PURE__*/ jsx("h2", {
+                className: "layout-page-header-title",
+                children: title
+            }),
+            slots.content
+        ]
+    });
+}
+
+export { RightPanel };
+//# sourceMappingURL=RightPanel.js.map

package/dist/esm/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,WAAWH,OAAAA,EAAS,OAAA,CAAA;AAElC,IAAA,qBACII,IAAA,CAACC,SAAAA,EAAAA;AAAQC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;AAAEC,QAAAA,YAAAA,EAAYN,KAAAA,IAAS,OAAA;;AACpDA,YAAAA,KAAAA,kBAASO,GAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,0BAAA;AAA4BT,gBAAAA,QAAAA,EAAAA;;AACnDD,YAAAA,KAAAA,CAAMW;;;AAGnB;;;;"}

package/dist/esm/shell/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function Sidebar({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/esm/shell/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../shell/Sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAe/D,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAyBnE"}

package/dist/esm/shell/Sidebar.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Button } from 'primereact/button';
+import { isPointerRevealMode } from '../configuration/layoutConfigTransitions.js';
+import { useLayoutConfig } from '../configuration/LayoutConfigProvider.js';
+import { readString } from './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 } = useLayoutConfig();
+    const title = readString(element, 'title');
+    const isPinnable = isPointerRevealMode(effectiveMode);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "layout-sidebar-header",
+                "data-scene-id": element.id,
+                children: [
+                    slots.logo,
+                    title && /*#__PURE__*/ jsx("span", {
+                        className: "layout-sidebar-title",
+                        children: title
+                    }),
+                    isPinnable && /*#__PURE__*/ jsx(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
+        ]
+    });
+}
+
+export { Sidebar };
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/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,eAAAA,EAAAA;IACvD,MAAMC,KAAAA,GAAQC,WAAWP,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMQ,aAAaC,mBAAAA,CAAoBP,aAAAA,CAAAA;IAEvC,qBACIQ,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAed,QAAQe,EAAE;;AAC3Dd,oBAAAA,KAAAA,CAAMe,IAAI;AACVV,oBAAAA,KAAAA,kBAASW,GAAA,CAACC,MAAAA,EAAAA;wBAAKL,SAAAA,EAAU,sBAAA;AAAwBP,wBAAAA,QAAAA,EAAAA;;AACjDE,oBAAAA,UAAAA,kBACGS,GAAA,CAACE,MAAAA,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/esm/shell/ThemeOption.d.ts

@@ -0,0 +1,10 @@
+import { ExternalComponent, Theme } from '@cratis/scene.model';
+import { ColorScheme } from '../configuration';
+export interface ThemeOption {
+    name: string;
+    label: string;
+    colorScheme: ColorScheme;
+}
+export declare function readThemeOptions(element: ExternalComponent, fallback: ThemeOption[]): ThemeOption[];
+export declare function themeOptionsFor(themes: Theme[]): ThemeOption[];
+//# sourceMappingURL=ThemeOption.d.ts.map

package/dist/esm/shell/ThemeOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeOption.d.ts","sourceRoot":"","sources":["../../../shell/ThemeOption.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,WAAW,WAAW;IAExB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,MAAM,CAAC;IAGd,WAAW,EAAE,WAAW,CAAC;CAC5B;AAaD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAWnG;AAMD,wBAAgB,eAAe,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,CAM9D"}

package/dist/esm/shell/ThemeOption.js

@@ -0,0 +1,39 @@
+import { ColorScheme } from '../configuration/ColorScheme.js';
+import 'react/jsx-runtime';
+import 'react';
+import { readRecords, recordString } from './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 = readRecords(element, 'themes').map((record)=>({
+            name: recordString(record, 'name'),
+            label: recordString(record, 'label') || recordString(record, 'name'),
+            colorScheme: record.isDark === true ? ColorScheme.Dark : 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.Dark : ColorScheme.Light
+        }));
+}
+
+export { readThemeOptions, themeOptionsFor };
+//# sourceMappingURL=ThemeOption.js.map

package/dist/esm/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,YAAYH,OAAAA,EAAS,QAAA,CAAA,CAAUI,GAAG,CAC/C,CAACC,UAAyB;AACtBC,YAAAA,IAAAA,EAAMC,aAAaF,MAAAA,EAAQ,MAAA,CAAA;AAC3BG,YAAAA,KAAAA,EAAOD,YAAAA,CAAaF,MAAAA,EAAQ,OAAA,CAAA,IAAYE,YAAAA,CAAaF,MAAAA,EAAQ,MAAA,CAAA;YAC7DI,WAAAA,EAAaJ,MAAAA,CAAOK,MAAM,KAAK,IAAA,GAAOC,YAAYC,IAAI,GAAGD,YAAYE;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,YAAYC,IAAI,GAAGD,YAAYE;SAC/D,CAAA,CAAA;AACJ;;;;"}

package/dist/esm/shell/ThemeSwitcher.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function ThemeSwitcher({ element }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/dist/esm/shell/ThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../shell/ThemeSwitcher.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAa/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAyBlE"}

package/dist/esm/shell/ThemeSwitcher.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useLayoutConfig } from '../configuration/LayoutConfigProvider.js';
+import { defaultBlueprintThemes } from '../themes/defaultBlueprintThemes.js';
+import 'react';
+import '@cratis/scene.react';
+import { readString } from './elementProperties.js';
+import { readThemeOptions, themeOptionsFor } from './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 } = useLayoutConfig();
+    const label = readString(element, 'label', 'Theme');
+    const options = readThemeOptions(element, themeOptionsFor(defaultBlueprintThemes));
+    return /*#__PURE__*/ jsxs("div", {
+        "data-scene-id": element.id,
+        children: [
+            /*#__PURE__*/ jsx("h3", {
+                className: "layout-config-section-title",
+                children: label
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "layout-config-options",
+                role: "group",
+                "aria-label": label,
+                children: options.map((option)=>/*#__PURE__*/ 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))
+            })
+        ]
+    });
+}
+
+export { ThemeSwitcher };
+//# sourceMappingURL=ThemeSwitcher.js.map

package/dist/esm/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,eAAAA,EAAAA;IACjD,MAAMC,KAAAA,GAAQC,UAAAA,CAAWN,OAAAA,EAAS,OAAA,EAAS,OAAA,CAAA;IAC3C,MAAMO,OAAAA,GAAUC,gBAAAA,CAAiBR,OAAAA,EAASS,eAAAA,CAAgBC,sBAAAA,CAAAA,CAAAA;AAE1D,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;;0BAC1BC,GAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,6BAAA;AAA+BZ,gBAAAA,QAAAA,EAAAA;;0BAC7CU,GAAA,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,GAAA,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/esm/shell/Topbar.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function Topbar({ element, slots }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=Topbar.d.ts.map

package/dist/esm/shell/Topbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../shell/Topbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAe/D,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAyBlE"}

package/dist/esm/shell/Topbar.js

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Button } from 'primereact/button';
+import { LayoutMode } from '../configuration/LayoutMode.js';
+import { useLayoutConfig } from '../configuration/LayoutConfigProvider.js';
+import { readBoolean } from './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 } = useLayoutConfig();
+    const showsToggle = readBoolean(element, 'showToggle', true) && togglesSidebar(effectiveMode);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "layout-topbar-start",
+                "data-scene-id": element.id,
+                children: [
+                    showsToggle && /*#__PURE__*/ jsx(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__*/ jsx("div", {
+                className: "layout-topbar-end",
+                children: slots.end
+            })
+        ]
+    });
+}
+function togglesSidebar(mode) {
+    return mode === LayoutMode.Static || mode === LayoutMode.Overlay;
+}
+
+export { Topbar };
+//# sourceMappingURL=Topbar.js.map

package/dist/esm/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,eAAAA,EAAAA;AACjD,IAAA,MAAMC,WAAAA,GAAcC,WAAAA,CAAYP,OAAAA,EAAS,YAAA,EAAc,SAASQ,cAAAA,CAAeN,aAAAA,CAAAA;IAE/E,qBACIO,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAeb,QAAQc,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,GAAA,CAACC,MAAAA,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,GAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM2B;;;;AAGtD;AAEA,SAASpB,eAAeqB,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,UAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,WAAWE,OAAO;AACpE;;;;"}