@cratis/scene.blueprint.default 4.28.0 → 4.30.0

package/dist/cjs/shell/RegionNavigation.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var scene_react = require('@cratis/scene.react');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The `layout-menu` vocabulary the shell's stylesheet already styles, so a region looks like the menu it replaces. */ const classNames = {
+    root: 'layout-region',
+    list: 'layout-menu',
+    item: 'layout-menu-item',
+    link: 'layout-menu-link',
+    icon: 'layout-menu-icon',
+    label: 'layout-menu-label',
+    toggle: 'layout-menu-toggle',
+    submenu: 'layout-submenu'
+};
+/** Whether a navigation model is in scope, so the topbar and sidebar have a region to show. */ function useHasRegionNavigation() {
+    return scene_react.useSceneNavigationModel() !== undefined;
+}
+/**
+ * The navigation a shell's topbar or sidebar shows when the application supplies a navigation model: the effective items of
+ * its region - inherit/extend/override already applied - as the shell's menu, with the active item, the hierarchy and
+ * the keyboard behaviour of `NavigationRegionView`.
+ */ function RegionNavigation({ region, label }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(scene_react.NavigationRegionView, {
+        region: region,
+        label: label,
+        classNames: {
+            ...classNames,
+            root: `layout-region layout-region-${region}`
+        }
+    });
+}
+
+exports.RegionNavigation = RegionNavigation;
+exports.useHasRegionNavigation = useHasRegionNavigation;
+//# sourceMappingURL=RegionNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionNavigation.js","sources":["../../../shell/RegionNavigation.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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { NavigationRegionClassNames, NavigationRegionView, useSceneNavigationModel } from '@cratis/scene.react';\n\n/** The `layout-menu` vocabulary the shell's stylesheet already styles, so a region looks like the menu it replaces. */\nconst classNames: Partial<NavigationRegionClassNames> = {\n    root: 'layout-region',\n    list: 'layout-menu',\n    item: 'layout-menu-item',\n    link: 'layout-menu-link',\n    icon: 'layout-menu-icon',\n    label: 'layout-menu-label',\n    toggle: 'layout-menu-toggle',\n    submenu: 'layout-submenu',\n};\n\n/** Whether a navigation model is in scope, so the topbar and sidebar have a region to show. */\nexport function useHasRegionNavigation(): boolean {\n    return useSceneNavigationModel() !== undefined;\n}\n\n/**\n * The navigation a shell's topbar or sidebar shows when the application supplies a navigation model: the effective items of\n * its region - inherit/extend/override already applied - as the shell's menu, with the active item, the hierarchy and\n * the keyboard behaviour of `NavigationRegionView`.\n */\nexport function RegionNavigation({ region, label }: { region: NavigationRegionKind; label?: string }) {\n    return <NavigationRegionView region={region} label={label} classNames={{ ...classNames, root: `layout-region layout-region-${region}` }} />;\n}\n"],"names":["classNames","root","list","item","link","icon","label","toggle","submenu","useHasRegionNavigation","useSceneNavigationModel","undefined","RegionNavigation","region","_jsx","NavigationRegionView"],"mappings":";;;;;AAAA;AACA;AAKA,wHACA,MAAMA,UAAAA,GAAkD;IACpDC,IAAAA,EAAM,eAAA;IACNC,IAAAA,EAAM,aAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,KAAAA,EAAO,mBAAA;IACPC,MAAAA,EAAQ,oBAAA;IACRC,OAAAA,EAAS;AACb,CAAA;AAEA,gGACO,SAASC,sBAAAA,GAAAA;AACZ,IAAA,OAAOC,mCAAAA,EAAAA,KAA8BC,SAAAA;AACzC;AAEA;;;;AAIC,IACM,SAASC,gBAAAA,CAAiB,EAAEC,MAAM,EAAEP,KAAK,EAAoD,EAAA;AAChG,IAAA,qBAAOQ,cAAA,CAACC,gCAAAA,EAAAA;QAAqBF,MAAAA,EAAQA,MAAAA;QAAQP,KAAAA,EAAOA,KAAAA;QAAON,UAAAA,EAAY;AAAE,YAAA,GAAGA,UAAU;YAAEC,IAAAA,EAAM,CAAC,4BAA4B,EAAEY,MAAAA,CAAAA;AAAS;;AAC1I;;;"}

package/dist/cjs/shell/Sidebar.js

@@ -4,7 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var button = require('primereact/button');
 var layoutConfigTransitions = require('../configuration/layoutConfigTransitions.js');
 var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var scene_model = require('@cratis/scene.model');
 var elementProperties = require('./elementProperties.js');
+var RegionNavigation = require('./RegionNavigation.js');
 
 /**
  * The sidebar's own chrome, inside the panel {@link AppShell} positions.
@@ -14,10 +16,14 @@ var elementProperties = require('./elementProperties.js');
  * 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.
  *
+ * When the application supplies a navigation model and the sidebar has no `content` of its own, the content is the effective
+ * navigation of the sidebar region for the module on the page (set `regionNavigation` to false to opt out).
+ *
  * The pin button only appears in `reveal` and `drawer`, the two modes where the sidebar answers to the
  * pointer and therefore needs a way to be made to stay.
  */ function Sidebar({ element, slots }) {
     const { effectiveMode, config, toggleSidebarAnchor } = LayoutConfigProvider.useLayoutConfig();
+    const hasRegion = RegionNavigation.useHasRegionNavigation();
     const title = elementProperties.readString(element, 'title');
     const isPinnable = layoutConfigTransitions.isPointerRevealMode(effectiveMode);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -46,7 +52,10 @@ var elementProperties = require('./elementProperties.js');
                     })
                 ]
             }),
-            slots.content
+            slots.content?.length ? slots.content : hasRegion && elementProperties.readBoolean(element, 'regionNavigation', true) ? /*#__PURE__*/ jsxRuntime.jsx(RegionNavigation.RegionNavigation, {
+                region: scene_model.NavigationRegionKind.Sidebar,
+                label: "Sidebar"
+            }) : null
         ]
     });
 }

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

@@ -1 +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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}>\n                        <i className={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'} aria-hidden='true' />\n                    </Button>\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","variant","rounded","iconOnly","aria-label","isSidebarAnchored","aria-pressed","onClick","i","aria-hidden","content"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,OAAAA,CAAQ,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAChE,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,oCAAAA,EAAAA;IACvD,MAAMC,KAAAA,GAAQC,6BAAWP,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMQ,aAAaC,2CAAAA,CAAoBP,aAAAA,CAAAA;IAEvC,qBACIQ,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAed,QAAQe,EAAE;;AAC3Dd,oBAAAA,KAAAA,CAAMe,IAAI;AACVV,oBAAAA,KAAAA,kBAASW,cAAA,CAACC,MAAAA,EAAAA;wBAAKL,SAAAA,EAAU,sBAAA;AAAwBP,wBAAAA,QAAAA,EAAAA;;AACjDE,oBAAAA,UAAAA,kBACGS,cAAA,CAACE,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYrB,MAAAA,CAAOsB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DC,wBAAAA,cAAAA,EAAcvB,OAAOsB,iBAAiB;wBACtCE,OAAAA,EAASvB,mBAAAA;AACT,wBAAA,QAAA,gBAAAa,cAAA,CAACW,GAAAA,EAAAA;4BAAEf,SAAAA,EAAWV,MAAAA,CAAOsB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;4BAAmBI,aAAAA,EAAY;;;;;AAIlG5B,YAAAA,KAAAA,CAAM6B;;;AAGnB;;"}
+{"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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { readBoolean, readString } from './elementProperties';\nimport { RegionNavigation, useHasRegionNavigation } from './RegionNavigation';\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 * When the application supplies a navigation model and the sidebar has no `content` of its own, the content is the effective\n * navigation of the sidebar region for the module on the page (set `regionNavigation` to false to opt out).\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 hasRegion = useHasRegionNavigation();\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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}>\n                        <i className={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'} aria-hidden='true' />\n                    </Button>\n                )}\n            </div>\n            {slots.content?.length ? slots.content : hasRegion && readBoolean(element, 'regionNavigation', true) ? <RegionNavigation region={NavigationRegionKind.Sidebar} label='Sidebar' /> : null}\n        </>\n    );\n}\n"],"names":["Sidebar","element","slots","effectiveMode","config","toggleSidebarAnchor","useLayoutConfig","hasRegion","useHasRegionNavigation","title","readString","isPinnable","isPointerRevealMode","_jsxs","_Fragment","div","className","data-scene-id","id","logo","_jsx","span","Button","type","variant","rounded","iconOnly","aria-label","isSidebarAnchored","aria-pressed","onClick","i","aria-hidden","content","length","readBoolean","RegionNavigation","region","NavigationRegionKind","label"],"mappings":";;;;;;;;;;AAUA;;;;;;;;;;;;;AAaC,IACM,SAASA,OAAAA,CAAQ,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAChE,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,oCAAAA,EAAAA;AACvD,IAAA,MAAMC,SAAAA,GAAYC,uCAAAA,EAAAA;IAClB,MAAMC,KAAAA,GAAQC,6BAAWT,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMU,aAAaC,2CAAAA,CAAoBT,aAAAA,CAAAA;IAEvC,qBACIU,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAehB,QAAQiB,EAAE;;AAC3DhB,oBAAAA,KAAAA,CAAMiB,IAAI;AACVV,oBAAAA,KAAAA,kBAASW,cAAA,CAACC,MAAAA,EAAAA;wBAAKL,SAAAA,EAAU,sBAAA;AAAwBP,wBAAAA,QAAAA,EAAAA;;AACjDE,oBAAAA,UAAAA,kBACGS,cAAA,CAACE,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYvB,MAAAA,CAAOwB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DC,wBAAAA,cAAAA,EAAczB,OAAOwB,iBAAiB;wBACtCE,OAAAA,EAASzB,mBAAAA;AACT,wBAAA,QAAA,gBAAAe,cAAA,CAACW,GAAAA,EAAAA;4BAAEf,SAAAA,EAAWZ,MAAAA,CAAOwB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;4BAAmBI,aAAAA,EAAY;;;;;YAIlG9B,KAAAA,CAAM+B,OAAO,EAAEC,MAAAA,GAAShC,KAAAA,CAAM+B,OAAO,GAAG1B,SAAAA,IAAa4B,6BAAAA,CAAYlC,OAAAA,EAAS,kBAAA,EAAoB,IAAA,CAAA,iBAAQmB,cAAA,CAACgB,iCAAAA,EAAAA;AAAiBC,gBAAAA,MAAAA,EAAQC,iCAAqBtC,OAAO;gBAAEuC,KAAAA,EAAM;AAAe,aAAA,CAAA,GAAA;;;AAGhM;;"}

package/dist/cjs/shell/Topbar.js

@@ -4,7 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var button = require('primereact/button');
 var LayoutMode = require('../configuration/LayoutMode.js');
 var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var scene_model = require('@cratis/scene.model');
 var elementProperties = require('./elementProperties.js');
+var RegionNavigation = require('./RegionNavigation.js');
 
 /**
  * The fixed strip across the top of the application shell.
@@ -13,11 +15,15 @@ var elementProperties = require('./elementProperties.js');
  * 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.
  *
+ * When the application supplies a navigation model and the topbar has no `menu` slot of its own, the menu is the effective
+ * navigation of the topbar region for the module on the page (set `regionNavigation` to false to opt out).
+ *
  * The toggle hides itself in the rail modes, where there is nothing to toggle: `slim`, `slim-plus` and
  * `compact` are always showing, `reveal` and `drawer` answer to the pointer and the pin, and `horizontal`
  * has no sidebar at all. A button that does nothing is worse than no button.
  */ function Topbar({ element, slots }) {
     const { effectiveMode, config, toggleSidebar } = LayoutConfigProvider.useLayoutConfig();
+    const hasRegion = RegionNavigation.useHasRegionNavigation();
     const showsToggle = elementProperties.readBoolean(element, 'showToggle', true) && togglesSidebar(effectiveMode);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
@@ -42,7 +48,10 @@ var elementProperties = require('./elementProperties.js');
                     slots.start
                 ]
             }),
-            slots.menu,
+            slots.menu?.length ? slots.menu : hasRegion && elementProperties.readBoolean(element, 'regionNavigation', true) ? /*#__PURE__*/ jsxRuntime.jsx(RegionNavigation.RegionNavigation, {
+                region: scene_model.NavigationRegionKind.Topbar,
+                label: "Modules"
+            }) : null,
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 className: "layout-topbar-end",
                 children: slots.end

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

@@ -1 +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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}>\n                        <i className='pi pi-bars' aria-hidden='true' />\n                    </Button>\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","variant","rounded","iconOnly","aria-label","isSidebarOpen","aria-expanded","onClick","i","aria-hidden","logo","start","menu","end","mode","LayoutMode","Static","Overlay"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC/D,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,aAAa,EAAE,GAAGC,oCAAAA,EAAAA;AACjD,IAAA,MAAMC,WAAAA,GAAcC,6BAAAA,CAAYP,OAAAA,EAAS,YAAA,EAAc,SAASQ,cAAAA,CAAeN,aAAAA,CAAAA;IAE/E,qBACIO,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAeb,QAAQc,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,cAAA,CAACC,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYlB,MAAAA,CAAOmB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAepB,OAAOmB,aAAa;wBACnCE,OAAAA,EAASpB,aAAAA;AACT,wBAAA,QAAA,gBAAAW,cAAA,CAACU,GAAAA,EAAAA;4BAAEb,SAAAA,EAAU,YAAA;4BAAac,aAAAA,EAAY;;;AAG7CzB,oBAAAA,KAAAA,CAAM0B,IAAI;AACV1B,oBAAAA,KAAAA,CAAM2B;;;AAEV3B,YAAAA,KAAAA,CAAM4B,IAAI;0BACXd,cAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM6B;;;;AAGtD;AAEA,SAAStB,eAAeuB,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,qBAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,sBAAWE,OAAO;AACpE;;"}
+{"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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { readBoolean } from './elementProperties';\nimport { RegionNavigation, useHasRegionNavigation } from './RegionNavigation';\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 * When the application supplies a navigation model and the topbar has no `menu` slot of its own, the menu is the effective\n * navigation of the topbar region for the module on the page (set `regionNavigation` to false to opt out).\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 hasRegion = useHasRegionNavigation();\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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}>\n                        <i className='pi pi-bars' aria-hidden='true' />\n                    </Button>\n                )}\n                {slots.logo}\n                {slots.start}\n            </div>\n            {slots.menu?.length ? slots.menu : hasRegion && readBoolean(element, 'regionNavigation', true) ? <RegionNavigation region={NavigationRegionKind.Topbar} label='Modules' /> : null}\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","hasRegion","useHasRegionNavigation","showsToggle","readBoolean","togglesSidebar","_jsxs","_Fragment","div","className","data-scene-id","id","_jsx","Button","type","variant","rounded","iconOnly","aria-label","isSidebarOpen","aria-expanded","onClick","i","aria-hidden","logo","start","menu","length","RegionNavigation","region","NavigationRegionKind","label","end","mode","LayoutMode","Static","Overlay"],"mappings":";;;;;;;;;;AAUA;;;;;;;;;;;;;AAaC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC/D,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,aAAa,EAAE,GAAGC,oCAAAA,EAAAA;AACjD,IAAA,MAAMC,SAAAA,GAAYC,uCAAAA,EAAAA;AAClB,IAAA,MAAMC,WAAAA,GAAcC,6BAAAA,CAAYT,OAAAA,EAAS,YAAA,EAAc,SAASU,cAAAA,CAAeR,aAAAA,CAAAA;IAE/E,qBACIS,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAef,QAAQgB,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,cAAA,CAACC,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYpB,MAAAA,CAAOqB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAetB,OAAOqB,aAAa;wBACnCE,OAAAA,EAAStB,aAAAA;AACT,wBAAA,QAAA,gBAAAa,cAAA,CAACU,GAAAA,EAAAA;4BAAEb,SAAAA,EAAU,YAAA;4BAAac,aAAAA,EAAY;;;AAG7C3B,oBAAAA,KAAAA,CAAM4B,IAAI;AACV5B,oBAAAA,KAAAA,CAAM6B;;;YAEV7B,KAAAA,CAAM8B,IAAI,EAAEC,MAAAA,GAAS/B,KAAAA,CAAM8B,IAAI,GAAGzB,SAAAA,IAAaG,6BAAAA,CAAYT,OAAAA,EAAS,kBAAA,EAAoB,IAAA,CAAA,iBAAQiB,cAAA,CAACgB,iCAAAA,EAAAA;AAAiBC,gBAAAA,MAAAA,EAAQC,iCAAqBpC,MAAM;gBAAEqC,KAAAA,EAAM;AAAe,aAAA,CAAA,GAAA,IAAA;0BAC7KnB,cAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBb,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMoC;;;;AAGtD;AAEA,SAAS3B,eAAe4B,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,qBAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,sBAAWE,OAAO;AACpE;;"}

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

@@ -0,0 +1,7 @@
+import { NavigationRegionKind } from '@cratis/scene.model';
+export declare function useHasRegionNavigation(): boolean;
+export declare function RegionNavigation({ region, label }: {
+    region: NavigationRegionKind;
+    label?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RegionNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionNavigation.d.ts","sourceRoot":"","sources":["../../../shell/RegionNavigation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAgB3D,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,MAAM,EAAE,oBAAoB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAEnG"}

package/dist/esm/shell/RegionNavigation.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSceneNavigationModel, NavigationRegionView } from '@cratis/scene.react';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The `layout-menu` vocabulary the shell's stylesheet already styles, so a region looks like the menu it replaces. */ const classNames = {
+    root: 'layout-region',
+    list: 'layout-menu',
+    item: 'layout-menu-item',
+    link: 'layout-menu-link',
+    icon: 'layout-menu-icon',
+    label: 'layout-menu-label',
+    toggle: 'layout-menu-toggle',
+    submenu: 'layout-submenu'
+};
+/** Whether a navigation model is in scope, so the topbar and sidebar have a region to show. */ function useHasRegionNavigation() {
+    return useSceneNavigationModel() !== undefined;
+}
+/**
+ * The navigation a shell's topbar or sidebar shows when the application supplies a navigation model: the effective items of
+ * its region - inherit/extend/override already applied - as the shell's menu, with the active item, the hierarchy and
+ * the keyboard behaviour of `NavigationRegionView`.
+ */ function RegionNavigation({ region, label }) {
+    return /*#__PURE__*/ jsx(NavigationRegionView, {
+        region: region,
+        label: label,
+        classNames: {
+            ...classNames,
+            root: `layout-region layout-region-${region}`
+        }
+    });
+}
+
+export { RegionNavigation, useHasRegionNavigation };
+//# sourceMappingURL=RegionNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionNavigation.js","sources":["../../../shell/RegionNavigation.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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { NavigationRegionClassNames, NavigationRegionView, useSceneNavigationModel } from '@cratis/scene.react';\n\n/** The `layout-menu` vocabulary the shell's stylesheet already styles, so a region looks like the menu it replaces. */\nconst classNames: Partial<NavigationRegionClassNames> = {\n    root: 'layout-region',\n    list: 'layout-menu',\n    item: 'layout-menu-item',\n    link: 'layout-menu-link',\n    icon: 'layout-menu-icon',\n    label: 'layout-menu-label',\n    toggle: 'layout-menu-toggle',\n    submenu: 'layout-submenu',\n};\n\n/** Whether a navigation model is in scope, so the topbar and sidebar have a region to show. */\nexport function useHasRegionNavigation(): boolean {\n    return useSceneNavigationModel() !== undefined;\n}\n\n/**\n * The navigation a shell's topbar or sidebar shows when the application supplies a navigation model: the effective items of\n * its region - inherit/extend/override already applied - as the shell's menu, with the active item, the hierarchy and\n * the keyboard behaviour of `NavigationRegionView`.\n */\nexport function RegionNavigation({ region, label }: { region: NavigationRegionKind; label?: string }) {\n    return <NavigationRegionView region={region} label={label} classNames={{ ...classNames, root: `layout-region layout-region-${region}` }} />;\n}\n"],"names":["classNames","root","list","item","link","icon","label","toggle","submenu","useHasRegionNavigation","useSceneNavigationModel","undefined","RegionNavigation","region","_jsx","NavigationRegionView"],"mappings":";;;AAAA;AACA;AAKA,wHACA,MAAMA,UAAAA,GAAkD;IACpDC,IAAAA,EAAM,eAAA;IACNC,IAAAA,EAAM,aAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,IAAAA,EAAM,kBAAA;IACNC,KAAAA,EAAO,mBAAA;IACPC,MAAAA,EAAQ,oBAAA;IACRC,OAAAA,EAAS;AACb,CAAA;AAEA,gGACO,SAASC,sBAAAA,GAAAA;AACZ,IAAA,OAAOC,uBAAAA,EAAAA,KAA8BC,SAAAA;AACzC;AAEA;;;;AAIC,IACM,SAASC,gBAAAA,CAAiB,EAAEC,MAAM,EAAEP,KAAK,EAAoD,EAAA;AAChG,IAAA,qBAAOQ,GAAA,CAACC,oBAAAA,EAAAA;QAAqBF,MAAAA,EAAQA,MAAAA;QAAQP,KAAAA,EAAOA,KAAAA;QAAON,UAAAA,EAAY;AAAE,YAAA,GAAGA,UAAU;YAAEC,IAAAA,EAAM,CAAC,4BAA4B,EAAEY,MAAAA,CAAAA;AAAS;;AAC1I;;"}

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare function Application({ initialScreen }: {
+    initialScreen: string;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof Application;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HierarchicalSidebar: Story;
+export declare const TwoSlots: Story;
+//# sourceMappingURL=RegionNavigation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionNavigation.stories.d.ts","sourceRoot":"","sources":["../../../shell/RegionNavigation.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA0DvD,iBAAS,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,MAAM,CAAA;CAAE,+BAUhE;AAMD,QAAA,MAAM,IAAI;;;;QAGQ,MAAM;;CACY,CAAC;eAEtB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,mBAAmB,EAAE,KAAmD,CAAC;AAGtF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, userEvent, within } from 'storybook/test';
+import { PrimeReactProvider } from '@primereact/core';
+import { NavigationRegionKind, NavigationRegionMode, Visibility } from '@cratis/scene.model';
+import { ApplicationStructureIndex } from '@cratis/scene.engine';
+import { CoreOutlet, SceneNavigationHost } from '@cratis/scene.react';
+import { LayoutConfigProvider } from '../configuration';
+import { Sidebar } from './Sidebar';
+import { Topbar } from './Topbar';
+const structure = {
+    modules: [
+        { id: 'dashboard', name: 'Dashboard', features: [{ id: 'overview', name: 'Overview', features: [], slices: [] }] },
+        { id: 'sales', name: 'Sales', features: [{ id: 'orders', name: 'Orders', features: [{ id: 'returns', name: 'Returns', features: [], slices: [] }], slices: [] }, { id: 'customers', name: 'Customers', features: [], slices: [] }] },
+        { id: 'support', name: 'Support', features: [{ id: 'tickets', name: 'Tickets', features: [], slices: [] }, { id: 'kb', name: 'Knowledge base', features: [], slices: [] }] },
+    ],
+};
+const navigation = {
+    application: { regions: [
+            { region: NavigationRegionKind.Topbar, items: [
+                    { id: 'dashboard', title: 'Dashboard', target: { module: 'dashboard' } },
+                    { id: 'sales', title: 'Sales', target: { module: 'sales' } },
+                    { id: 'support', title: 'Support', target: { module: 'support' } },
+                ] },
+            { region: NavigationRegionKind.Sidebar, items: [{ id: 'dashboard', title: 'Dashboard', target: { module: 'dashboard', feature: 'overview' } }] },
+        ] },
+    modules: [
+        { module: 'sales', regions: [{ region: NavigationRegionKind.Sidebar, mode: NavigationRegionMode.Override, items: [
+                        { id: 'orders', title: 'Orders', target: { module: 'sales', feature: 'orders' }, children: [{ id: 'returns', title: 'Returns', target: { module: 'sales', feature: 'orders.returns' } }] },
+                        { id: 'customers', title: 'Customers', target: { module: 'sales', feature: 'customers' } },
+                    ] }] },
+        { module: 'support', regions: [
+                { region: NavigationRegionKind.Topbar, mode: NavigationRegionMode.Extend, items: [{ id: 'help', title: 'Help center', target: { module: 'support', feature: 'kb' }, slot: 'side' }] },
+                { region: NavigationRegionKind.Sidebar, mode: NavigationRegionMode.Override, items: [
+                        { id: 'tickets', title: 'Tickets', target: { module: 'support', feature: 'tickets' } },
+                        { id: 'kb', title: 'Knowledge base', target: { module: 'support', feature: 'kb' }, slot: 'side' },
+                    ] },
+            ] },
+    ],
+};
+const element = (id, componentName, properties = {}, content = []) => ({ id, componentName, properties, slots: content.length > 0 ? { content } : {}, visibility: Visibility.Visible });
+function Page({ element: page, slots }) {
+    return _jsxs("section", { style: { padding: '1rem' }, children: [_jsx("h2", { children: page.id }), slots.content] });
+}
+const screens = {
+    'dashboard.overview': element('dashboard.overview', 'story:page'),
+    'sales.orders': element('sales.orders', 'story:page'),
+    'sales.orders.returns': element('sales.orders.returns', 'story:page'),
+    'sales.customers': element('sales.customers', 'story:page'),
+    'support.tickets': element('support.tickets', 'story:page', {}, [element('side', 'core:outlet', { name: 'side' })]),
+    'support.kb': element('support.kb', 'story:page'),
+};
+function Application({ initialScreen }) {
+    return _jsx(PrimeReactProvider, { children: _jsx(LayoutConfigProvider, { children: _jsx(SceneNavigationHost, { screens: screens, initialScreen: initialScreen, registry: { 'story:page': Page, 'core:outlet': CoreOutlet }, navigationModel: { structure: new ApplicationStructureIndex(structure), navigation }, frame: content => _jsxs("div", { className: 'layout-wrapper layout-static', children: [_jsx("div", { className: 'layout-topbar', children: _jsx(Topbar, { element: element('topbar', 'topbar'), slots: {} }) }), _jsx("div", { className: 'layout-sidebar', children: _jsx(Sidebar, { element: element('sidebar', 'sidebar'), slots: {} }) }), _jsx("div", { className: 'layout-content-wrapper', children: content })] }) }) }) });
+}
+const meta = {
+    title: 'Blueprint/Navigation regions',
+    component: Application,
+    parameters: { layout: 'fullscreen' },
+};
+export default meta;
+export const HierarchicalSidebar = { args: { initialScreen: 'sales.orders' } };
+export const TwoSlots = {
+    args: { initialScreen: 'support.tickets' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('link', { name: 'Knowledge base' }));
+        await expect(canvasElement.querySelectorAll('.layout-region-sidebar [data-active="true"]').length).toBe(2);
+    },
+};
+//# sourceMappingURL=RegionNavigation.stories.js.map

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

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

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

@@ -1 +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,+BA0BnE"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../shell/Sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAoB/D,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BA2BnE"}

package/dist/esm/shell/Sidebar.js

@@ -2,7 +2,9 @@ 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';
+import { NavigationRegionKind } from '@cratis/scene.model';
+import { readString, readBoolean } from './elementProperties.js';
+import { useHasRegionNavigation, RegionNavigation } from './RegionNavigation.js';
 
 /**
  * The sidebar's own chrome, inside the panel {@link AppShell} positions.
@@ -12,10 +14,14 @@ import { readString } from './elementProperties.js';
  * 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.
  *
+ * When the application supplies a navigation model and the sidebar has no `content` of its own, the content is the effective
+ * navigation of the sidebar region for the module on the page (set `regionNavigation` to false to opt out).
+ *
  * 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 hasRegion = useHasRegionNavigation();
     const title = readString(element, 'title');
     const isPinnable = isPointerRevealMode(effectiveMode);
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -44,7 +50,10 @@ import { readString } from './elementProperties.js';
                     })
                 ]
             }),
-            slots.content
+            slots.content?.length ? slots.content : hasRegion && readBoolean(element, 'regionNavigation', true) ? /*#__PURE__*/ jsx(RegionNavigation, {
+                region: NavigationRegionKind.Sidebar,
+                label: "Sidebar"
+            }) : null
         ]
     });
 }

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

@@ -1 +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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}>\n                        <i className={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'} aria-hidden='true' />\n                    </Button>\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","variant","rounded","iconOnly","aria-label","isSidebarAnchored","aria-pressed","onClick","i","aria-hidden","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,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYrB,MAAAA,CAAOsB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DC,wBAAAA,cAAAA,EAAcvB,OAAOsB,iBAAiB;wBACtCE,OAAAA,EAASvB,mBAAAA;AACT,wBAAA,QAAA,gBAAAa,GAAA,CAACW,GAAAA,EAAAA;4BAAEf,SAAAA,EAAWV,MAAAA,CAAOsB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;4BAAmBI,aAAAA,EAAY;;;;;AAIlG5B,YAAAA,KAAAA,CAAM6B;;;AAGnB;;"}
+{"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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { readBoolean, readString } from './elementProperties';\nimport { RegionNavigation, useHasRegionNavigation } from './RegionNavigation';\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 * When the application supplies a navigation model and the sidebar has no `content` of its own, the content is the effective\n * navigation of the sidebar region for the module on the page (set `regionNavigation` to false to opt out).\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 hasRegion = useHasRegionNavigation();\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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}>\n                        <i className={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'} aria-hidden='true' />\n                    </Button>\n                )}\n            </div>\n            {slots.content?.length ? slots.content : hasRegion && readBoolean(element, 'regionNavigation', true) ? <RegionNavigation region={NavigationRegionKind.Sidebar} label='Sidebar' /> : null}\n        </>\n    );\n}\n"],"names":["Sidebar","element","slots","effectiveMode","config","toggleSidebarAnchor","useLayoutConfig","hasRegion","useHasRegionNavigation","title","readString","isPinnable","isPointerRevealMode","_jsxs","_Fragment","div","className","data-scene-id","id","logo","_jsx","span","Button","type","variant","rounded","iconOnly","aria-label","isSidebarAnchored","aria-pressed","onClick","i","aria-hidden","content","length","readBoolean","RegionNavigation","region","NavigationRegionKind","label"],"mappings":";;;;;;;;AAUA;;;;;;;;;;;;;AAaC,IACM,SAASA,OAAAA,CAAQ,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAChE,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,eAAAA,EAAAA;AACvD,IAAA,MAAMC,SAAAA,GAAYC,sBAAAA,EAAAA;IAClB,MAAMC,KAAAA,GAAQC,WAAWT,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMU,aAAaC,mBAAAA,CAAoBT,aAAAA,CAAAA;IAEvC,qBACIU,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAehB,QAAQiB,EAAE;;AAC3DhB,oBAAAA,KAAAA,CAAMiB,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,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYvB,MAAAA,CAAOwB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DC,wBAAAA,cAAAA,EAAczB,OAAOwB,iBAAiB;wBACtCE,OAAAA,EAASzB,mBAAAA;AACT,wBAAA,QAAA,gBAAAe,GAAA,CAACW,GAAAA,EAAAA;4BAAEf,SAAAA,EAAWZ,MAAAA,CAAOwB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;4BAAmBI,aAAAA,EAAY;;;;;YAIlG9B,KAAAA,CAAM+B,OAAO,EAAEC,MAAAA,GAAShC,KAAAA,CAAM+B,OAAO,GAAG1B,SAAAA,IAAa4B,WAAAA,CAAYlC,OAAAA,EAAS,kBAAA,EAAoB,IAAA,CAAA,iBAAQmB,GAAA,CAACgB,gBAAAA,EAAAA;AAAiBC,gBAAAA,MAAAA,EAAQC,qBAAqBtC,OAAO;gBAAEuC,KAAAA,EAAM;AAAe,aAAA,CAAA,GAAA;;;AAGhM;;"}

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare function OrdersToolbar({ warnEmptySlices }: {
+    warnEmptySlices: boolean;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof OrdersToolbar;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Running: Story;
+export declare const Designing: Story;
+//# sourceMappingURL=ToolbarSliceDialog.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSliceDialog.stories.d.ts","sourceRoot":"","sources":["../../../shell/ToolbarSliceDialog.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,iBAAS,aAAa,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,+BAOvE;AAMD,QAAA,MAAM,IAAI;;;;QAGQ,MAAM;;CACc,CAAC;eAExB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAA2C,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, userEvent, within } from 'storybook/test';
+import { ApplicationStructureIndex } from '@cratis/scene.engine';
+import { SceneNavigationHost, SliceCommandFieldsProvider, SliceInvokerProvider, coreComponents, createDryRunInvoker } from '@cratis/scene.react';
+const structure = {
+    modules: [{ id: 'sales', name: 'Sales', features: [{ id: 'orders', name: 'Orders', features: [], slices: [{ id: 'PlaceOrder', name: 'Place order', kind: 'StateChange', command: 'PlaceOrder' }] }] }],
+};
+const element = (id, componentName, properties = {}, slots = {}) => ({ id, componentName, properties, slots });
+const toolbar = element('toolbar', 'core:toolbar', { name: 'orders' }, { items: [
+        element('new', 'core:toolbarItem', { name: 'new', kind: 'Action', label: 'New order', slice: 'sales.orders.PlaceOrder', emphasis: 'primary' }),
+        element('cancel', 'core:toolbarItem', { name: 'cancel', kind: 'Action', label: 'Cancel order', slice: 'sales.orders.PlaceOrder', emphasis: 'secondary' }),
+        element('more', 'core:toolbarItem', { name: 'more', kind: 'Action', label: 'More', emphasis: 'quiet' }),
+    ] });
+function OrdersToolbar({ warnEmptySlices }) {
+    return _jsx(SliceInvokerProvider, { invoker: createDryRunInvoker({ onInvoked: invocation => console.info('Dry run', invocation) }), warnEmptySlices: warnEmptySlices, children: _jsx(SliceCommandFieldsProvider, { fieldsFor: () => [{ name: 'customer', type: 'string', required: true }, { name: 'product', type: 'string' }, { name: 'quantity', type: 'number' }], children: _jsx(SceneNavigationHost, { screens: { Orders: toolbar }, initialScreen: 'Orders', registry: coreComponents, navigationModel: { structure: new ApplicationStructureIndex(structure), navigation: { application: { regions: [] }, modules: [] } } }) }) });
+}
+const meta = {
+    title: 'Blueprint/Toolbar slice dialogs',
+    component: OrdersToolbar,
+    parameters: { layout: 'padded' },
+};
+export default meta;
+export const Running = {
+    args: { warnEmptySlices: false },
+    play: async ({ canvasElement }) => {
+        await userEvent.click(within(canvasElement).getByRole('button', { name: 'New order' }));
+        await expect(await within(document.body).findByRole('dialog', { name: 'New order' })).toBeTruthy();
+    },
+};
+export const Designing = { args: { warnEmptySlices: true } };
+//# sourceMappingURL=ToolbarSliceDialog.stories.js.map

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

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

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

@@ -1 +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,+BA0BlE"}
+{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../shell/Topbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAoB/D,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,wBAAwB,+BA2BlE"}

package/dist/esm/shell/Topbar.js

@@ -2,7 +2,9 @@ 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 { NavigationRegionKind } from '@cratis/scene.model';
 import { readBoolean } from './elementProperties.js';
+import { useHasRegionNavigation, RegionNavigation } from './RegionNavigation.js';
 
 /**
  * The fixed strip across the top of the application shell.
@@ -11,11 +13,15 @@ import { readBoolean } from './elementProperties.js';
  * 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.
  *
+ * When the application supplies a navigation model and the topbar has no `menu` slot of its own, the menu is the effective
+ * navigation of the topbar region for the module on the page (set `regionNavigation` to false to opt out).
+ *
  * 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 hasRegion = useHasRegionNavigation();
     const showsToggle = readBoolean(element, 'showToggle', true) && togglesSidebar(effectiveMode);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -40,7 +46,10 @@ import { readBoolean } from './elementProperties.js';
                     slots.start
                 ]
             }),
-            slots.menu,
+            slots.menu?.length ? slots.menu : hasRegion && readBoolean(element, 'regionNavigation', true) ? /*#__PURE__*/ jsx(RegionNavigation, {
+                region: NavigationRegionKind.Topbar,
+                label: "Modules"
+            }) : null,
             /*#__PURE__*/ jsx("div", {
                 className: "layout-topbar-end",
                 children: slots.end

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

@@ -1 +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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}>\n                        <i className='pi pi-bars' aria-hidden='true' />\n                    </Button>\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","variant","rounded","iconOnly","aria-label","isSidebarOpen","aria-expanded","onClick","i","aria-hidden","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,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYlB,MAAAA,CAAOmB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAepB,OAAOmB,aAAa;wBACnCE,OAAAA,EAASpB,aAAAA;AACT,wBAAA,QAAA,gBAAAW,GAAA,CAACU,GAAAA,EAAAA;4BAAEb,SAAAA,EAAU,YAAA;4BAAac,aAAAA,EAAY;;;AAG7CzB,oBAAAA,KAAAA,CAAM0B,IAAI;AACV1B,oBAAAA,KAAAA,CAAM2B;;;AAEV3B,YAAAA,KAAAA,CAAM4B,IAAI;0BACXd,GAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM6B;;;;AAGtD;AAEA,SAAStB,eAAeuB,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,UAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,WAAWE,OAAO;AACpE;;"}
+{"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 { NavigationRegionKind } from '@cratis/scene.model';\nimport { readBoolean } from './elementProperties';\nimport { RegionNavigation, useHasRegionNavigation } from './RegionNavigation';\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 * When the application supplies a navigation model and the topbar has no `menu` slot of its own, the menu is the effective\n * navigation of the topbar region for the module on the page (set `regionNavigation` to false to opt out).\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 hasRegion = useHasRegionNavigation();\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                        variant='text'\n                        rounded\n                        iconOnly\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}>\n                        <i className='pi pi-bars' aria-hidden='true' />\n                    </Button>\n                )}\n                {slots.logo}\n                {slots.start}\n            </div>\n            {slots.menu?.length ? slots.menu : hasRegion && readBoolean(element, 'regionNavigation', true) ? <RegionNavigation region={NavigationRegionKind.Topbar} label='Modules' /> : null}\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","hasRegion","useHasRegionNavigation","showsToggle","readBoolean","togglesSidebar","_jsxs","_Fragment","div","className","data-scene-id","id","_jsx","Button","type","variant","rounded","iconOnly","aria-label","isSidebarOpen","aria-expanded","onClick","i","aria-hidden","logo","start","menu","length","RegionNavigation","region","NavigationRegionKind","label","end","mode","LayoutMode","Static","Overlay"],"mappings":";;;;;;;;AAUA;;;;;;;;;;;;;AAaC,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,SAAAA,GAAYC,sBAAAA,EAAAA;AAClB,IAAA,MAAMC,WAAAA,GAAcC,WAAAA,CAAYT,OAAAA,EAAS,YAAA,EAAc,SAASU,cAAAA,CAAeR,aAAAA,CAAAA;IAE/E,qBACIS,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAef,QAAQgB,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,GAAA,CAACC,MAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,OAAAA,EAAQ,MAAA;wBACRC,OAAO,EAAA,IAAA;wBACPC,QAAQ,EAAA,IAAA;wBACRC,YAAAA,EAAYpB,MAAAA,CAAOqB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAetB,OAAOqB,aAAa;wBACnCE,OAAAA,EAAStB,aAAAA;AACT,wBAAA,QAAA,gBAAAa,GAAA,CAACU,GAAAA,EAAAA;4BAAEb,SAAAA,EAAU,YAAA;4BAAac,aAAAA,EAAY;;;AAG7C3B,oBAAAA,KAAAA,CAAM4B,IAAI;AACV5B,oBAAAA,KAAAA,CAAM6B;;;YAEV7B,KAAAA,CAAM8B,IAAI,EAAEC,MAAAA,GAAS/B,KAAAA,CAAM8B,IAAI,GAAGzB,SAAAA,IAAaG,WAAAA,CAAYT,OAAAA,EAAS,kBAAA,EAAoB,IAAA,CAAA,iBAAQiB,GAAA,CAACgB,gBAAAA,EAAAA;AAAiBC,gBAAAA,MAAAA,EAAQC,qBAAqBpC,MAAM;gBAAEqC,KAAAA,EAAM;AAAe,aAAA,CAAA,GAAA,IAAA;0BAC7KnB,GAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBb,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMoC;;;;AAGtD;AAEA,SAAS3B,eAAe4B,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,UAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,WAAWE,OAAO;AACpE;;"}