@cratis/scene.blueprint.default 0.1.0

package/dist/esm/shell/AppShell.js

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

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

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

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

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

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

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

package/dist/esm/shell/Breadcrumb.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPanel.d.ts","sourceRoot":"","sources":["../../../shell/ConfigPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AA8B/D,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BAoEvE"}

package/dist/esm/shell/ConfigPanel.js

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

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

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

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

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

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

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

package/dist/esm/shell/Footer.js

@@ -0,0 +1,26 @@
+import { jsxs, Fragment, 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 strip below the content.
+ *
+ * Kept as its own slot rather than folded into the content because it is application chrome, not part of
+ * a screen: the same footer is on every page, and a screen that had to render it would have to remember
+ * to.
+ */ function Footer({ element, slots }) {
+    const text = readString(element, 'text');
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-scene-id": element.id,
+                children: text
+            }),
+            slots.content
+        ]
+    });
+}
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../shell/Footer.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readString } from './elementProperties';\n\n/**\n * The strip below the content.\n *\n * Kept as its own slot rather than folded into the content because it is application chrome, not part of\n * a screen: the same footer is on every page, and a screen that had to render it would have to remember\n * to.\n */\nexport function Footer({ element, slots }: RegisteredComponentProps) {\n    const text = readString(element, 'text');\n\n    return (\n        <>\n            <span data-scene-id={element.id}>{text}</span>\n            {slots.content}\n        </>\n    );\n}\n"],"names":["Footer","element","slots","text","readString","_jsxs","_Fragment","_jsx","span","data-scene-id","id","content"],"mappings":";;;AAAA;AACA;AAKA;;;;;;AAMC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IAC/D,MAAMC,IAAAA,GAAOC,WAAWH,OAAAA,EAAS,MAAA,CAAA;IAEjC,qBACII,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAACC,MAAAA,EAAAA;AAAKC,gBAAAA,eAAAA,EAAeR,QAAQS,EAAE;AAAGP,gBAAAA,QAAAA,EAAAA;;AACjCD,YAAAA,KAAAA,CAAMS;;;AAGnB;;;;"}

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

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

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

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

package/dist/esm/shell/FullPageShell.js

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

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

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

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

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

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

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

package/dist/esm/shell/LayoutModeSwitcher.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { layoutModes, LayoutMode } from '../configuration/LayoutMode.js';
+import { useLayoutConfig } from '../configuration/LayoutConfigProvider.js';
+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.
+/** What each mode is called in the configurator - the same names the PrimeTek template line uses. */ const modeLabels = {
+    [LayoutMode.Static]: 'Static',
+    [LayoutMode.Overlay]: 'Overlay',
+    [LayoutMode.Slim]: 'Slim',
+    [LayoutMode.SlimPlus]: 'Slim+',
+    [LayoutMode.Compact]: 'Compact',
+    [LayoutMode.Horizontal]: 'Horizontal',
+    [LayoutMode.Reveal]: 'Reveal',
+    [LayoutMode.Drawer]: 'Drawer'
+};
+/**
+ * Switches between the layout modes.
+ *
+ * Below the mobile breakpoint every button is disabled and the panel says why, rather than the picker
+ * disappearing. A control that vanishes reads as a bug; a disabled control with a sentence next to it
+ * reads as a decision - and the choice is still recorded and still there when the window grows again.
+ */ function LayoutModeSwitcher({ element }) {
+    const { config, setMode } = useLayoutConfig();
+    const label = readString(element, 'label', 'Menu mode');
+    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: layoutModes.map((mode)=>/*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "layout-config-option",
+                        disabled: config.isMobile,
+                        "aria-pressed": config.mode === mode,
+                        onClick: ()=>setMode(mode),
+                        children: modeLabels[mode]
+                    }, mode))
+            }),
+            config.isMobile && /*#__PURE__*/ jsx("p", {
+                className: "layout-config-note",
+                children: "Below 991px every mode renders off-canvas, so the choice is kept but not applied."
+            })
+        ]
+    });
+}
+
+export { LayoutModeSwitcher };
+//# sourceMappingURL=LayoutModeSwitcher.js.map

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

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

package/dist/esm/shell/LayoutModes.stories.d.ts

@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/react';
+import { GalleryScreenPreview } from '../gallery';
+declare const meta: {
+    title: string;
+    component: typeof GalleryScreenPreview;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Static: Story;
+export declare const Overlay: Story;
+export declare const Slim: Story;
+export declare const SlimPlus: Story;
+export declare const Compact: Story;
+export declare const Horizontal: Story;
+export declare const Reveal: Story;
+export declare const Drawer: Story;
+export declare const DrawerAnchored: Story;
+export declare const DarkMenu: Story;
+export declare const Interactive: Story;
+//# sourceMappingURL=LayoutModes.stories.d.ts.map

package/dist/esm/shell/LayoutModes.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutModes.stories.d.ts","sourceRoot":"","sources":["../../../shell/LayoutModes.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AASlD,QAAA,MAAM,IAAI;;;;QAIF,MAAM;QACN,IAAI;YACA,WAAW;gBACP,SAAS;;;;;CAMoB,CAAC;eAE/B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAOnC,eAAO,MAAM,MAAM,EAAE,KAA2C,CAAC;AAGjE,eAAO,MAAM,OAAO,EAAE,KAA4C,CAAC;AAGnE,eAAO,MAAM,IAAI,EAAE,KAAyC,CAAC;AAG7D,eAAO,MAAM,QAAQ,EAAE,KAA6C,CAAC;AAGrE,eAAO,MAAM,OAAO,EAAE,KAA4C,CAAC;AAGnE,eAAO,MAAM,UAAU,EAAE,KAA+C,CAAC;AAGzE,eAAO,MAAM,MAAM,EAAE,KAA2C,CAAC;AAGjE,eAAO,MAAM,MAAM,EAAE,KAA2C,CAAC;AAGjE,eAAO,MAAM,cAAc,EAAE,KAAiG,CAAC;AAG/H,eAAO,MAAM,QAAQ,EAAE,KAA0E,CAAC;AAGlG,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC"}

package/dist/esm/shell/LayoutModes.stories.js

@@ -0,0 +1,43 @@
+import { expect, userEvent, within } from 'storybook/test';
+import { LayoutMode, MenuTheme } from '../configuration';
+import { GalleryScreenPreview } from '../gallery';
+const meta = {
+    title: 'Blueprint/Layout modes',
+    component: GalleryScreenPreview,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'The eight menu modes, each rendering the same dashboard. Below 991px every one of them is forced off-canvas - resize the preview to see it.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+function inMode(mode, extra = {}) {
+    return { screenName: 'Dashboard', initialConfig: { mode, ...extra } };
+}
+export const Static = { args: inMode(LayoutMode.Static) };
+export const Overlay = { args: inMode(LayoutMode.Overlay) };
+export const Slim = { args: inMode(LayoutMode.Slim) };
+export const SlimPlus = { args: inMode(LayoutMode.SlimPlus) };
+export const Compact = { args: inMode(LayoutMode.Compact) };
+export const Horizontal = { args: inMode(LayoutMode.Horizontal) };
+export const Reveal = { args: inMode(LayoutMode.Reveal) };
+export const Drawer = { args: inMode(LayoutMode.Drawer) };
+export const DrawerAnchored = { args: inMode(LayoutMode.Drawer, { isSidebarAnchored: true, isSidebarRevealed: true }) };
+export const DarkMenu = { args: inMode(LayoutMode.Static, { menuTheme: MenuTheme.Dark }) };
+export const Interactive = {
+    args: inMode(LayoutMode.Static),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const wrapper = canvasElement.querySelector('.layout-wrapper');
+        await expect(wrapper.className).not.toContain('layout-static-inactive');
+        await userEvent.click(canvas.getByRole('button', { name: 'Close the menu' }));
+        await expect(canvasElement.querySelector('.layout-wrapper').className).toContain('layout-static-inactive');
+        await userEvent.click(canvas.getByRole('button', { name: 'Open the menu' }));
+        await expect(canvasElement.querySelector('.layout-wrapper').className).not.toContain('layout-static-inactive');
+    },
+};
+//# sourceMappingURL=LayoutModes.stories.js.map

package/dist/esm/shell/LayoutModes.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutModes.stories.js","sourceRoot":"","sources":["../../../shell/LayoutModes.stories.tsx"],"names":[],"mappings":"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"}

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

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

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

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