@cratis/scene.blueprint.default 1.0.0 → 2.0.0

package/dist/cjs/shell/UserMenu.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var avatar = require('primereact/avatar');
 var button = require('primereact/button');
 var menu = require('primereact/menu');
@@ -12,10 +11,16 @@ var elementProperties = require('./elementProperties.js');
  *
  * The popup is PrimeReact's `Menu` rather than hand-written markup: an overlay that positions itself,
  * traps focus and closes on escape is framework behavior, and re-implementing it in a layout package is
- * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact 10
+ * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact
  * has no primitive at all - the app-shell modes - and uses the library everywhere else.
+ *
+ * PrimeReact 11 replaced the `model` array with composition, so the entries are rendered here rather than
+ * handed over as data - and `primereact/menuitem`, the type that array was made of, went with it, which is
+ * why they are mapped into this package's own {@link MenuEntry}. The trade is worth taking: `Menu.Trigger`
+ * now owns opening the popup and reporting `aria-haspopup`/`aria-expanded` for it, so the ref, the toggle
+ * handler and the hand-maintained aria that used to sit here - and could drift out of step with the popup
+ * they described - are gone.
  */ function UserMenu({ element }) {
-    const menu$1 = react.useRef(null);
     const name = elementProperties.readString(element, 'name');
     const role = elementProperties.readString(element, 'role');
     const initials = elementProperties.readString(element, 'initials', name.slice(0, 1).toUpperCase());
@@ -28,9 +33,11 @@ var elementProperties = require('./elementProperties.js');
         className: "layout-user-menu",
         "data-scene-id": element.id,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar, {
-                label: initials,
-                shape: "circle"
+            /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar.Root, {
+                shape: "circle",
+                children: /*#__PURE__*/ jsxRuntime.jsx(avatar.Avatar.Fallback, {
+                    children: initials
+                })
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("span", {
                 className: "layout-user-menu-name",
@@ -44,21 +51,41 @@ var elementProperties = require('./elementProperties.js');
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(menu.Menu, {
-                ref: menu$1,
-                model: items,
-                popup: true,
-                id: `${element.id}-menu`
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                type: "button",
-                text: true,
-                rounded: true,
-                icon: "pi pi-angle-down",
-                "aria-label": `Open the menu for ${name}`,
-                "aria-controls": `${element.id}-menu`,
-                "aria-haspopup": true,
-                onClick: (event)=>menu$1.current?.toggle(event)
+            /*#__PURE__*/ jsxRuntime.jsxs(menu.Menu.Root, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(menu.Menu.Trigger, {
+                        as: button.Button,
+                        variant: "text",
+                        rounded: true,
+                        iconOnly: true,
+                        "aria-label": `Open the menu for ${name}`,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-angle-down",
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(menu.Menu.Portal, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(menu.Menu.Positioner, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(menu.Menu.Popup, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(menu.Menu.List, {
+                                    children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs(menu.Menu.Item, {
+                                            as: "a",
+                                            href: item.url,
+                                            children: [
+                                                item.icon && /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                                    className: item.icon,
+                                                    "aria-hidden": "true"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                    children: item.label
+                                                })
+                                            ]
+                                        }, item.label))
+                                })
+                            })
+                        })
+                    })
+                ]
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.js","sources":["../../../shell/UserMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useRef } from 'react';\nimport { Avatar } from 'primereact/avatar';\nimport { Button } from 'primereact/button';\nimport { Menu as PrimeMenu } from 'primereact/menu';\nimport { MenuItem as PrimeMenuItem } from 'primereact/menuitem';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readRecords, readString, recordString } from './elementProperties';\n\n/**\n * The signed-in user's avatar and menu.\n *\n * The popup is PrimeReact's `Menu` rather than hand-written markup: an overlay that positions itself,\n * traps focus and closes on escape is framework behavior, and re-implementing it in a layout package is\n * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact 10\n * has no primitive at all - the app-shell modes - and uses the library everywhere else.\n */\nexport function UserMenu({ element }: RegisteredComponentProps) {\n    const menu = useRef<PrimeMenu>(null);\n    const name = readString(element, 'name');\n    const role = readString(element, 'role');\n    const initials = readString(element, 'initials', name.slice(0, 1).toUpperCase());\n    const items = readRecords(element, 'items').map(\n        (item): PrimeMenuItem => ({\n            label: recordString(item, 'label'),\n            icon: recordString(item, 'icon') || undefined,\n            url: recordString(item, 'targetScreen') ? `#/${recordString(item, 'targetScreen')}` : undefined,\n        }),\n    );\n\n    return (\n        <div className='layout-user-menu' data-scene-id={element.id}>\n            <Avatar label={initials} shape='circle' />\n            <span className='layout-user-menu-name'>\n                <span>{name}</span>\n                {role && <span className='layout-user-menu-role'>{role}</span>}\n            </span>\n            <PrimeMenu ref={menu} model={items} popup id={`${element.id}-menu`} />\n            <Button\n                type='button'\n                text\n                rounded\n                icon='pi pi-angle-down'\n                aria-label={`Open the menu for ${name}`}\n                aria-controls={`${element.id}-menu`}\n                aria-haspopup\n                onClick={event => menu.current?.toggle(event)}\n            />\n        </div>\n    );\n}\n"],"names":["UserMenu","element","menu","useRef","name","readString","role","initials","slice","toUpperCase","items","readRecords","map","item","label","recordString","icon","undefined","url","_jsxs","div","className","data-scene-id","id","_jsx","Avatar","shape","span","PrimeMenu","ref","model","popup","Button","type","text","rounded","aria-label","aria-controls","aria-haspopup","onClick","event","current","toggle"],"mappings":";;;;;;;;;AAWA;;;;;;;AAOC,IACM,SAASA,QAAAA,CAAS,EAAEC,OAAO,EAA4B,EAAA;AAC1D,IAAA,MAAMC,SAAOC,YAAAA,CAAkB,IAAA,CAAA;IAC/B,MAAMC,IAAAA,GAAOC,6BAAWJ,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMK,IAAAA,GAAOD,6BAAWJ,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMM,QAAAA,GAAWF,6BAAWJ,OAAAA,EAAS,UAAA,EAAYG,KAAKI,KAAK,CAAC,CAAA,EAAG,CAAA,CAAA,CAAGC,WAAW,EAAA,CAAA;IAC7E,MAAMC,KAAAA,GAAQC,8BAAYV,OAAAA,EAAS,OAAA,CAAA,CAASW,GAAG,CAC3C,CAACC,QAAyB;AACtBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,IAAAA,EAAMD,8BAAAA,CAAaF,MAAM,MAAA,CAAA,IAAWI,SAAAA;YACpCC,GAAAA,EAAKH,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIE,eAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,kBAAA;AAAmBC,QAAAA,eAAAA,EAAerB,QAAQsB,EAAE;;0BACvDC,cAAA,CAACC,aAAAA,EAAAA;gBAAOX,KAAAA,EAAOP,QAAAA;gBAAUmB,KAAAA,EAAM;;0BAC/BP,eAAA,CAACQ,MAAAA,EAAAA;gBAAKN,SAAAA,EAAU,uBAAA;;kCACZG,cAAA,CAACG,MAAAA,EAAAA;AAAMvB,wBAAAA,QAAAA,EAAAA;;AACNE,oBAAAA,IAAAA,kBAAQkB,cAAA,CAACG,MAAAA,EAAAA;wBAAKN,SAAAA,EAAU,uBAAA;AAAyBf,wBAAAA,QAAAA,EAAAA;;;;0BAEtDkB,cAAA,CAACI,SAAAA,EAAAA;gBAAUC,GAAAA,EAAK3B,MAAAA;gBAAM4B,KAAAA,EAAOpB,KAAAA;gBAAOqB,KAAK,EAAA,IAAA;AAACR,gBAAAA,EAAAA,EAAI,CAAA,EAAGtB,OAAAA,CAAQsB,EAAE,CAAC,KAAK;;0BACjEC,cAAA,CAACQ,aAAAA,EAAAA;gBACGC,IAAAA,EAAK,QAAA;gBACLC,IAAI,EAAA,IAAA;gBACJC,OAAO,EAAA,IAAA;gBACPnB,IAAAA,EAAK,kBAAA;gBACLoB,YAAAA,EAAY,CAAC,kBAAkB,EAAEhC,IAAAA,CAAAA,CAAM;AACvCiC,gBAAAA,eAAAA,EAAe,CAAA,EAAGpC,OAAAA,CAAQsB,EAAE,CAAC,KAAK,CAAC;gBACnCe,eAAa,EAAA,IAAA;AACbC,gBAAAA,OAAAA,EAASC,CAAAA,KAAAA,GAAStC,MAAAA,CAAKuC,OAAO,EAAEC,MAAAA,CAAOF,KAAAA;;;;AAIvD;;;;"}
+{"version":3,"file":"UserMenu.js","sources":["../../../shell/UserMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Avatar } from 'primereact/avatar';\nimport { Button } from 'primereact/button';\nimport { Menu as PrimeMenu } from 'primereact/menu';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { MenuEntry } from './MenuEntry';\nimport { readRecords, readString, recordString } from './elementProperties';\n\n/**\n * The signed-in user's avatar and menu.\n *\n * The popup is PrimeReact's `Menu` rather than hand-written markup: an overlay that positions itself,\n * traps focus and closes on escape is framework behavior, and re-implementing it in a layout package is\n * how a shell ends up with its own subtly broken menu. The shell hand-writes CSS only where PrimeReact\n * has no primitive at all - the app-shell modes - and uses the library everywhere else.\n *\n * PrimeReact 11 replaced the `model` array with composition, so the entries are rendered here rather than\n * handed over as data - and `primereact/menuitem`, the type that array was made of, went with it, which is\n * why they are mapped into this package's own {@link MenuEntry}. The trade is worth taking: `Menu.Trigger`\n * now owns opening the popup and reporting `aria-haspopup`/`aria-expanded` for it, so the ref, the toggle\n * handler and the hand-maintained aria that used to sit here - and could drift out of step with the popup\n * they described - are gone.\n */\nexport function UserMenu({ element }: RegisteredComponentProps) {\n    const name = readString(element, 'name');\n    const role = readString(element, 'role');\n    const initials = readString(element, 'initials', name.slice(0, 1).toUpperCase());\n    const items = readRecords(element, 'items').map(\n        (item): MenuEntry => ({\n            label: recordString(item, 'label'),\n            icon: recordString(item, 'icon') || undefined,\n            url: recordString(item, 'targetScreen') ? `#/${recordString(item, 'targetScreen')}` : undefined,\n        }),\n    );\n\n    return (\n        <div className='layout-user-menu' data-scene-id={element.id}>\n            <Avatar.Root shape='circle'>\n                <Avatar.Fallback>{initials}</Avatar.Fallback>\n            </Avatar.Root>\n            <span className='layout-user-menu-name'>\n                <span>{name}</span>\n                {role && <span className='layout-user-menu-role'>{role}</span>}\n            </span>\n            <PrimeMenu.Root>\n                <PrimeMenu.Trigger as={Button} variant='text' rounded iconOnly aria-label={`Open the menu for ${name}`}>\n                    <i className='pi pi-angle-down' aria-hidden='true' />\n                </PrimeMenu.Trigger>\n                <PrimeMenu.Portal>\n                    <PrimeMenu.Positioner>\n                        <PrimeMenu.Popup>\n                            <PrimeMenu.List>\n                                {items.map(item => (\n                                    <PrimeMenu.Item key={item.label} as='a' href={item.url}>\n                                        {item.icon && <i className={item.icon} aria-hidden='true' />}\n                                        <span>{item.label}</span>\n                                    </PrimeMenu.Item>\n                                ))}\n                            </PrimeMenu.List>\n                        </PrimeMenu.Popup>\n                    </PrimeMenu.Positioner>\n                </PrimeMenu.Portal>\n            </PrimeMenu.Root>\n        </div>\n    );\n}\n"],"names":["UserMenu","element","name","readString","role","initials","slice","toUpperCase","items","readRecords","map","item","label","recordString","icon","undefined","url","_jsxs","div","className","data-scene-id","id","_jsx","Avatar","Root","shape","Fallback","span","PrimeMenu","Trigger","as","Button","variant","rounded","iconOnly","aria-label","i","aria-hidden","Portal","Positioner","Popup","List","Item","href"],"mappings":";;;;;;;;AAUA;;;;;;;;;;;;;;AAcC,IACM,SAASA,QAAAA,CAAS,EAAEC,OAAO,EAA4B,EAAA;IAC1D,MAAMC,IAAAA,GAAOC,6BAAWF,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMG,IAAAA,GAAOD,6BAAWF,OAAAA,EAAS,MAAA,CAAA;IACjC,MAAMI,QAAAA,GAAWF,6BAAWF,OAAAA,EAAS,UAAA,EAAYC,KAAKI,KAAK,CAAC,CAAA,EAAG,CAAA,CAAA,CAAGC,WAAW,EAAA,CAAA;IAC7E,MAAMC,KAAAA,GAAQC,8BAAYR,OAAAA,EAAS,OAAA,CAAA,CAASS,GAAG,CAC3C,CAACC,QAAqB;AAClBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,IAAAA,EAAMD,8BAAAA,CAAaF,MAAM,MAAA,CAAA,IAAWI,SAAAA;YACpCC,GAAAA,EAAKH,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIE,eAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,kBAAA;AAAmBC,QAAAA,eAAAA,EAAenB,QAAQoB,EAAE;;AACvD,0BAAAC,cAAA,CAACC,cAAOC,IAAI,EAAA;gBAACC,KAAAA,EAAM,QAAA;wCACfH,cAAA,CAACC,cAAOG,QAAQ,EAAA;AAAErB,oBAAAA,QAAAA,EAAAA;;;0BAEtBY,eAAA,CAACU,MAAAA,EAAAA;gBAAKR,SAAAA,EAAU,uBAAA;;kCACZG,cAAA,CAACK,MAAAA,EAAAA;AAAMzB,wBAAAA,QAAAA,EAAAA;;AACNE,oBAAAA,IAAAA,kBAAQkB,cAAA,CAACK,MAAAA,EAAAA;wBAAKR,SAAAA,EAAU,uBAAA;AAAyBf,wBAAAA,QAAAA,EAAAA;;;;AAEtD,0BAAAa,eAAA,CAACW,UAAUJ,IAAI,EAAA;;AACX,kCAAAF,cAAA,CAACM,UAAUC,OAAO,EAAA;wBAACC,EAAAA,EAAIC,aAAAA;wBAAQC,OAAAA,EAAQ,MAAA;wBAAOC,OAAO,EAAA,IAAA;wBAACC,QAAQ,EAAA,IAAA;wBAACC,YAAAA,EAAY,CAAC,kBAAkB,EAAEjC,IAAAA,CAAAA,CAAM;AAClG,wBAAA,QAAA,gBAAAoB,cAAA,CAACc,GAAAA,EAAAA;4BAAEjB,SAAAA,EAAU,kBAAA;4BAAmBkB,aAAAA,EAAY;;;AAEhD,kCAAAf,cAAA,CAACM,UAAUU,MAAM,EAAA;gDACbhB,cAAA,CAACM,UAAUW,UAAU,EAAA;oDACjBjB,cAAA,CAACM,UAAUY,KAAK,EAAA;wDACZlB,cAAA,CAACM,UAAUa,IAAI,EAAA;AACVjC,oCAAAA,QAAAA,EAAAA,KAAAA,CAAME,GAAG,CAACC,CAAAA,IAAAA,iBACPM,eAAA,CAACW,UAAUc,IAAI,EAAA;4CAAkBZ,EAAAA,EAAG,GAAA;AAAIa,4CAAAA,IAAAA,EAAMhC,KAAKK,GAAG;;gDACjDL,IAAAA,CAAKG,IAAI,kBAAIQ,cAAA,CAACc,GAAAA,EAAAA;AAAEjB,oDAAAA,SAAAA,EAAWR,KAAKG,IAAI;oDAAEuB,aAAAA,EAAY;;8DACnDf,cAAA,CAACK,MAAAA,EAAAA;AAAMhB,oDAAAA,QAAAA,EAAAA,IAAAA,CAAKC;;;AAFKD,yCAAAA,EAAAA,IAAAA,CAAKC,KAAK,CAAA;;;;;;;;;AAYnE;;;;"}

package/dist/esm/for_AppShell/when_rendering_a_gallery_screen.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
+import { PrimeReactProvider } from '@primereact/core';
 import { SceneElementView, coreComponents, corePackage, mergePackageRegistries } from '@cratis/scene.react';
 import { defaultBlueprint } from '../defaultBlueprint';
 import { composeScreenElement, galleryComponentCatalog, galleryPreviewProfile, galleryScreen, resolveElementComponentNames } from '../gallery';
@@ -7,7 +8,7 @@ const registry = mergePackageRegistries([corePackage, defaultBlueprint]);
 function renderGalleryScreen(name) {
     const galleryItem = galleryScreen(name);
     const element = resolveElementComponentNames(composeScreenElement(galleryItem), galleryPreviewProfile, galleryComponentCatalog);
-    render(_jsx(SceneElementView, { element: element, registry: registry, resolveBinding: () => undefined }));
+    render(_jsx(PrimeReactProvider, { children: _jsx(SceneElementView, { element: element, registry: registry, resolveBinding: () => undefined }) }));
 }
 function has(selector) {
     return document.querySelector(selector) !== null;

package/dist/esm/for_AppShell/when_rendering_a_gallery_screen.js.map

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

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

@@ -1 +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"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../shell/Breadcrumb.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAmB/D,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BA0C/D"}

package/dist/esm/shell/Breadcrumb.js

@@ -1,28 +1,65 @@
-import { jsx } from 'react/jsx-runtime';
-import { BreadCrumb } from 'primereact/breadcrumb';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import { Breadcrumb as Breadcrumb$1 } 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
+ * 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.
+ * eight modes. The shell only writes CSS where PrimeReact genuinely has no answer, and this is not one of
+ * those places: `Breadcrumb.Root` still supplies the `nav`, its `aria-label` and the list semantics, which
+ * is the part that is easy to get wrong by hand.
+ *
+ * What PrimeReact 11 no longer supplies is the `model` array - the component is composed now, and the
+ * `primereact/menuitem` type the array was made of is gone with it, which is why the trail is mapped into
+ * this package's own {@link MenuEntry}. The last entry is `Breadcrumb.Current` rather than a link: a trail
+ * whose final crumb navigates to the page already open is a link that does nothing, and it takes
+ * `aria-current='page'` away from the one element that should carry it.
  */ function Breadcrumb({ element }) {
     const home = readOptionalString(element, 'homeTargetScreen');
-    const model = readRecords(element, 'items').map((item)=>({
+    const trail = 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
+        children: /*#__PURE__*/ jsx(Breadcrumb$1.Root, {
+            children: /*#__PURE__*/ jsxs(Breadcrumb$1.List, {
+                children: [
+                    home && /*#__PURE__*/ jsx(Breadcrumb$1.Item, {
+                        children: /*#__PURE__*/ jsx(Breadcrumb$1.Link, {
+                            as: "a",
+                            href: `#/${home}`,
+                            "aria-label": "Home",
+                            children: /*#__PURE__*/ jsx("i", {
+                                className: "pi pi-home",
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    trail.map((entry, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                (!!home || index > 0) && /*#__PURE__*/ jsx(Breadcrumb$1.Separator, {
+                                    children: /*#__PURE__*/ jsx("i", {
+                                        className: "pi pi-chevron-right",
+                                        "aria-hidden": "true"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Breadcrumb$1.Item, {
+                                    children: entry.url ? /*#__PURE__*/ jsx(Breadcrumb$1.Link, {
+                                        as: "a",
+                                        href: entry.url,
+                                        children: entry.label
+                                    }) : /*#__PURE__*/ jsx(Breadcrumb$1.Current, {
+                                        children: entry.label
+                                    })
+                                })
+                            ]
+                        }, `${index}-${entry.label}`))
+                ]
+            })
         })
     });
 }

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

@@ -1 +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;;;;"}
+{"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 { Fragment } from 'react';\nimport { Breadcrumb as PrimeBreadcrumb } from 'primereact/breadcrumb';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { MenuEntry } from './MenuEntry';\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 genuinely has no answer, and this is not one of\n * those places: `Breadcrumb.Root` still supplies the `nav`, its `aria-label` and the list semantics, which\n * is the part that is easy to get wrong by hand.\n *\n * What PrimeReact 11 no longer supplies is the `model` array - the component is composed now, and the\n * `primereact/menuitem` type the array was made of is gone with it, which is why the trail is mapped into\n * this package's own {@link MenuEntry}. The last entry is `Breadcrumb.Current` rather than a link: a trail\n * whose final crumb navigates to the page already open is a link that does nothing, and it takes\n * `aria-current='page'` away from the one element that should carry it.\n */\nexport function Breadcrumb({ element }: RegisteredComponentProps) {\n    const home = readOptionalString(element, 'homeTargetScreen');\n    const trail = readRecords(element, 'items').map(\n        (item): MenuEntry => ({\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            <PrimeBreadcrumb.Root>\n                <PrimeBreadcrumb.List>\n                    {home && (\n                        <PrimeBreadcrumb.Item>\n                            <PrimeBreadcrumb.Link as='a' href={`#/${home}`} aria-label='Home'>\n                                <i className='pi pi-home' aria-hidden='true' />\n                            </PrimeBreadcrumb.Link>\n                        </PrimeBreadcrumb.Item>\n                    )}\n                    {trail.map((entry, index) => (\n                        <Fragment key={`${index}-${entry.label}`}>\n                            {(!!home || index > 0) && (\n                                <PrimeBreadcrumb.Separator>\n                                    <i className='pi pi-chevron-right' aria-hidden='true' />\n                                </PrimeBreadcrumb.Separator>\n                            )}\n                            <PrimeBreadcrumb.Item>\n                                {entry.url ? (\n                                    <PrimeBreadcrumb.Link as='a' href={entry.url}>\n                                        {entry.label}\n                                    </PrimeBreadcrumb.Link>\n                                ) : (\n                                    <PrimeBreadcrumb.Current>{entry.label}</PrimeBreadcrumb.Current>\n                                )}\n                            </PrimeBreadcrumb.Item>\n                        </Fragment>\n                    ))}\n                </PrimeBreadcrumb.List>\n            </PrimeBreadcrumb.Root>\n        </div>\n    );\n}\n"],"names":["Breadcrumb","element","home","readOptionalString","trail","readRecords","map","item","label","recordString","url","undefined","_jsx","div","data-scene-id","id","PrimeBreadcrumb","Root","_jsxs","List","Item","Link","as","href","aria-label","i","className","aria-hidden","entry","index","Fragment","Separator","Current"],"mappings":";;;;;AASA;;;;;;;;;;;;;;AAcC,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,QAAqB;AAClBC,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;gCAC1BH,GAAA,CAACI,aAAgBC,IAAI,EAAA;oCACjBC,IAAA,CAACF,aAAgBG,IAAI,EAAA;;oBAChBjB,IAAAA,kBACGU,GAAA,CAACI,aAAgBI,IAAI,EAAA;gDACjBR,GAAA,CAACI,aAAgBK,IAAI,EAAA;4BAACC,EAAAA,EAAG,GAAA;4BAAIC,IAAAA,EAAM,CAAC,EAAE,EAAErB,IAAAA,CAAAA,CAAM;4BAAEsB,YAAAA,EAAW,MAAA;AACvD,4BAAA,QAAA,gBAAAZ,GAAA,CAACa,GAAAA,EAAAA;gCAAEC,SAAAA,EAAU,YAAA;gCAAaC,aAAAA,EAAY;;;;AAIjDvB,oBAAAA,KAAAA,CAAME,GAAG,CAAC,CAACsB,KAAAA,EAAOC,sBACfX,IAAA,CAACY,QAAAA,EAAAA;;gCACK,CAAA,CAAC,CAAC5B,IAAAA,IAAQ2B,KAAAA,GAAQ,CAAA,mBAChBjB,GAAA,CAACI,aAAgBe,SAAS,EAAA;AACtB,oCAAA,QAAA,gBAAAnB,GAAA,CAACa,GAAAA,EAAAA;wCAAEC,SAAAA,EAAU,qBAAA;wCAAsBC,aAAAA,EAAY;;;AAGvD,8CAAAf,GAAA,CAACI,aAAgBI,IAAI,EAAA;AAChBQ,oCAAAA,QAAAA,EAAAA,KAAAA,CAAMlB,GAAG,iBACNE,GAAA,CAACI,YAAAA,CAAgBK,IAAI,EAAA;wCAACC,EAAAA,EAAG,GAAA;AAAIC,wCAAAA,IAAAA,EAAMK,MAAMlB,GAAG;AACvCkB,wCAAAA,QAAAA,EAAAA,KAAAA,CAAMpB;AAGX,qCAAA,CAAA,iBAAAI,GAAA,CAACI,aAAgBgB,OAAO,EAAA;AAAEJ,wCAAAA,QAAAA,EAAAA,KAAAA,CAAMpB;;;;AAZ7B,yBAAA,EAAA,CAAA,EAAGqB,KAAAA,CAAM,CAAC,EAAED,KAAAA,CAAMpB,KAAK,CAAA,CAAE,CAAA;;;;;AAqBhE;;;;"}

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

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

package/dist/esm/shell/ConfigPanel.js

@@ -1,7 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from 'primereact/button';
-import { Sidebar } from 'primereact/sidebar';
+import { Drawer } from 'primereact/drawer';
 import { colorSchemes, ColorScheme } from '../configuration/ColorScheme.js';
 import { menuThemes, MenuTheme } from '../configuration/MenuTheme.js';
 import { useLayoutConfig } from '../configuration/LayoutConfigProvider.js';
@@ -25,98 +24,128 @@ import { readString, readBoolean } from './elementProperties.js';
  * 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`.)
+ * The panel is `primereact/drawer`, which is the slide-in overlay this component has always wanted.
+ * PrimeReact 11 gave the name `Sidebar` to something else entirely - a new app-shell primitive with
+ * `SidebarLayout`/`SidebarAside`/`SidebarPanel` parts - so the v10 `Sidebar` import this file used to
+ * carry would still resolve after the upgrade and would silently render an app shell inside the shell.
+ * That is the one rename in the whole library that fails quietly rather than loudly, which is why it is
+ * called out here: this is `Drawer`, deliberately, and it is not the {@link Sidebar} next door either -
+ * that one is this package's own component for the docked panel's chrome.
+ *
+ * Open state is the drawer's own. `Drawer.Trigger` renders in place through `Drawer.Root`'s fragment, so
+ * the floating cog sits exactly where it did while getting `aria-expanded`/`aria-controls` from the
+ * component rather than from hand-written props that can drift out of step with the panel.
  */ 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, {
+    return /*#__PURE__*/ jsxs(Drawer.Root, {
+        position: "right",
         children: [
-            /*#__PURE__*/ jsx(Button, {
-                type: "button",
+            /*#__PURE__*/ jsx(Drawer.Trigger, {
+                as: Button,
                 rounded: true,
-                icon: "pi pi-cog",
+                iconOnly: true,
                 className: "layout-config-button",
                 "aria-label": title,
                 "data-scene-id": element.id,
-                onClick: ()=>setIsVisible(true)
+                children: /*#__PURE__*/ jsx("i", {
+                    className: "pi pi-cog",
+                    "aria-hidden": "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__*/ jsxs(Drawer.Portal, {
+                children: [
+                    /*#__PURE__*/ jsx(Drawer.Backdrop, {}),
+                    /*#__PURE__*/ jsxs(Drawer.Popup, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Drawer.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Drawer.Title, {
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ jsx(Drawer.Close, {
+                                        "aria-label": `Close ${title}`,
+                                        children: /*#__PURE__*/ jsx("i", {
+                                            className: "pi pi-times",
+                                            "aria-hidden": "true"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Drawer.Content, {
+                                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
+                                    ]
                                 })
-                            ]
-                        }),
-                        /*#__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
-                    ]
-                })
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

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

@@ -1 +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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"}
+{"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 { Button } from 'primereact/button';\nimport { Drawer } from 'primereact/drawer';\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 is `primereact/drawer`, which is the slide-in overlay this component has always wanted.\n * PrimeReact 11 gave the name `Sidebar` to something else entirely - a new app-shell primitive with\n * `SidebarLayout`/`SidebarAside`/`SidebarPanel` parts - so the v10 `Sidebar` import this file used to\n * carry would still resolve after the upgrade and would silently render an app shell inside the shell.\n * That is the one rename in the whole library that fails quietly rather than loudly, which is why it is\n * called out here: this is `Drawer`, deliberately, and it is not the {@link Sidebar} next door either -\n * that one is this package's own component for the docked panel's chrome.\n *\n * Open state is the drawer's own. `Drawer.Trigger` renders in place through `Drawer.Root`'s fragment, so\n * the floating cog sits exactly where it did while getting `aria-expanded`/`aria-controls` from the\n * component rather than from hand-written props that can drift out of step with the panel.\n */\nexport function ConfigPanel({ element, slots }: RegisteredComponentProps) {\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        <Drawer.Root position='right'>\n            <Drawer.Trigger as={Button} rounded iconOnly className='layout-config-button' aria-label={title} data-scene-id={element.id}>\n                <i className='pi pi-cog' aria-hidden='true' />\n            </Drawer.Trigger>\n            <Drawer.Portal>\n                <Drawer.Backdrop />\n                <Drawer.Popup>\n                    <Drawer.Header>\n                        <Drawer.Title>{title}</Drawer.Title>\n                        <Drawer.Close aria-label={`Close ${title}`}>\n                            <i className='pi pi-times' aria-hidden='true' />\n                        </Drawer.Close>\n                    </Drawer.Header>\n                    <Drawer.Content>\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                    </Drawer.Content>\n                </Drawer.Popup>\n            </Drawer.Portal>\n        </Drawer.Root>\n    );\n}\n"],"names":["colorSchemeLabels","ColorScheme","Light","Dark","menuThemeLabels","MenuTheme","Primary","ConfigPanel","element","slots","config","setColorScheme","setMenuTheme","useLayoutConfig","title","readString","showsMenuTheme","readBoolean","showsMode","_jsxs","Drawer","Root","position","_jsx","Trigger","as","Button","rounded","iconOnly","className","aria-label","data-scene-id","id","i","aria-hidden","Portal","Backdrop","Popup","Header","Title","Close","Content","div","h3","role","colorSchemes","map","scheme","button","type","aria-pressed","colorScheme","onClick","ThemeSwitcher","properties","label","LayoutModeSwitcher","menuThemes","menuTheme","content"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export interface MenuEntry {
+    label: string;
+    icon?: string;
+    url?: string;
+}
+//# sourceMappingURL=MenuEntry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuEntry.d.ts","sourceRoot":"","sources":["../../../shell/MenuEntry.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,SAAS;IAEtB,KAAK,EAAE,MAAM,CAAC;IAGd,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/esm/shell/MenuEntry.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MenuEntry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuEntry.js","sourceRoot":"","sources":["../../../shell/MenuEntry.ts"],"names":[],"mappings":""}

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,+BAyBnE"}
+{"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"}

package/dist/esm/shell/Sidebar.js

@@ -31,12 +31,16 @@ import { readString } from './elementProperties.js';
                     }),
                     isPinnable && /*#__PURE__*/ jsx(Button, {
                         type: "button",
-                        text: true,
+                        variant: "text",
                         rounded: true,
-                        icon: config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open',
+                        iconOnly: true,
                         "aria-label": config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open',
                         "aria-pressed": config.isSidebarAnchored,
-                        onClick: toggleSidebarAnchor
+                        onClick: toggleSidebarAnchor,
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open',
+                            "aria-hidden": "true"
+                        })
                     })
                 ]
             }),