@cratis/scene.blueprint.default 1.1.0 → 2.0.0

package/.storybook/preview.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Preview } from '@storybook/react';
+import { PrimeReactProvider } from '@primereact/core';
+import Lara from '@primeuix/themes/lara';
+
+// PrimeReact 11 ships zero CSS - there is no `primereact/resources` directory to import a base sheet or a
+// theme from any more. A look is a preset: a plain JavaScript token object that `@primeuix/styled` turns
+// into `--p-*` custom properties at runtime when the provider is handed one. Lara is the same family this
+// preview used to load as `lara-light-indigo`, so the stories keep the look they were written against.
+//
+// `primeicons` is still a stylesheet, and the shell's own sheet still layers on top of both. Loading them
+// here rather than from a story keeps every story looking the same and matches what a host does once, at
+// its entry point.
+import 'primeicons/primeicons.css';
+import '../shell/layout.css';
+
+/**
+ * Every story renders inside `PrimeReactProvider`, because PrimeReact 11 requires it: each component
+ * resolves its configuration, theme and z-index registry through that context and throws without one. The
+ * shell reaches for PrimeReact in five places - the topbar toggle, the sidebar pin, the user menu, the
+ * breadcrumb and the configurator's drawer - so this is not optional decoration, it is what makes the
+ * stories render at all.
+ *
+ * No `license` is supplied here: PrimeReact 11 is commercially licensed and its provider verifies a key on
+ * mount, so a preview without one logs a warning and shows PrimeTek's banner. That is the honest state of
+ * an unlicensed development preview rather than something to hide - a host supplies its own key through
+ * the same prop.
+ */
+const preview: Preview = {
+    decorators: [
+        Story => (
+            <PrimeReactProvider theme={{ preset: Lara }}>
+                <Story />
+            </PrimeReactProvider>
+        ),
+    ],
+    parameters: {
+        controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+    },
+};
+
+export default preview;

package/README.md

@@ -99,7 +99,7 @@ rule below references a `--scene-*` name - the same bridge pattern `@cratis/comp
 
 The stylesheet is a plain `.css` file rather than an import from TypeScript, because this repo's rollup
 config has no CSS plugin and adding one is not this package's call. A host imports
-`@cratis/scene.blueprint.default/styles` once; Storybook does it in `.storybook/preview.ts`.
+`@cratis/scene.blueprint.default/styles` once; Storybook does it in `.storybook/preview.tsx`.
 
 ## Theme attribution
 
@@ -149,22 +149,35 @@ papered-over one. A host with all four bundles uses `galleryProfile` and sees th
 
 ## PrimeReact 11
 
-This shell is deliberately hand-rolled CSS **today**, because PrimeReact 10 has no app-shell primitive:
-its `Sidebar` is an overlay drawer (v11 renames it `Drawer` for exactly that reason), and the docked, rail,
-reveal and drawer behaviors have nowhere to come from but a stylesheet.
+This package builds on PrimeReact 11. Two things about that upgrade are worth knowing before editing any
+shell component.
 
-PrimeReact 11 introduces a first-class `Sidebar` for the app-shell role, with `variant`, `collapsible`,
-`side`, `overlay` and `openOnHover` props and a `Sidebar.Layout` registry. A v11 port would collapse:
+**`Sidebar` and `Drawer` swapped meanings, and the swap is silent.** v10's `Sidebar` was an overlay
+drawer; v11 calls that `primereact/drawer` and gives the name `primereact/sidebar` to a genuinely new
+app-shell primitive (`SidebarLayout`, `SidebarAside`, `SidebarPanel`, `SidebarMenu`…). An import that kept
+the v10 name still resolves, still compiles, and quietly renders an app shell where an overlay used to be.
+`ConfigPanel` is the one place here that used it, and it is on `Drawer`. Nothing in this package imports
+`primereact/sidebar` - `shell/Sidebar.tsx` is *this blueprint's own* component for the docked panel's
+chrome and has nothing to do with either.
 
-- the docked/off-canvas rules (`layout-static*`, `layout-overlay*`) into `variant` + `overlay`;
-- the reveal and drawer hover machinery, and most of `isSidebarRevealed`, into `openOnHover`;
-- the rail widths (`slim`, `slim-plus`, `compact`) into `collapsible` plus a width token;
-- the wrapper-class plumbing in `layoutWrapperClasses` into `Sidebar.Layout`.
+**Every widget is compositional.** `model` arrays are gone, so the breadcrumb and the user menu render
+their entries as children, and `primereact/menuitem` - the data type those arrays were made of - was
+removed with them. This package owns the replacement shape as `shell/MenuEntry.ts`. `Button` lost `icon`,
+`label`, `text` and `outlined`: an icon is a child, and `text`/`outlined` are values of `variant`.
+
+The app-shell `Sidebar` primitive is a **standing opportunity, not a completed port**. Every mode here is
+still hand-written CSS. Adopting it would collapse:
+
+- the docked/off-canvas rules (`layout-static*`, `layout-overlay*`) into its variant and overlay props;
+- the reveal and drawer hover machinery, and most of `isSidebarRevealed`, into its hover-open behavior;
+- the rail widths (`slim`, `slim-plus`, `compact`) into a collapsible width token;
+- the wrapper-class plumbing in `layoutWrapperClasses` into `SidebarLayout`.
 
 What would **not** collapse, and would stay this package's own: the mobile forcing at 991px, the
 persistence, the menu-theme axis, and `horizontal` (a sidebar that stops being a sidebar is not a sidebar
-variant). Studio pins `primereact` to `10.9.8` and `@cratis/components` hard-depends on it, so the port is
-blocked on that pin, not on this package.
+variant). That is a deliberate follow-up rather than part of the version bump - rewriting eight layout
+modes onto a new primitive is a behavior change, and doing it inside a dependency upgrade would make both
+impossible to review.
 
 ## Deliberately not built
 

package/dist/cjs/shell/Breadcrumb.js

@@ -1,30 +1,67 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var breadcrumb = require('primereact/breadcrumb');
 var elementProperties = require('./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 = elementProperties.readOptionalString(element, 'homeTargetScreen');
-    const model = elementProperties.readRecords(element, 'items').map((item)=>({
+    const trail = elementProperties.readRecords(element, 'items').map((item)=>({
             label: elementProperties.recordString(item, 'label'),
             url: elementProperties.recordString(item, 'targetScreen') ? `#/${elementProperties.recordString(item, 'targetScreen')}` : undefined
         }));
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         "data-scene-id": element.id,
-        children: /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.BreadCrumb, {
-            model: model,
-            home: home ? {
-                icon: 'pi pi-home',
-                url: `#/${home}`
-            } : undefined
+        children: /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Root, {
+            children: /*#__PURE__*/ jsxRuntime.jsxs(breadcrumb.Breadcrumb.List, {
+                children: [
+                    home && /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Item, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Link, {
+                            as: "a",
+                            href: `#/${home}`,
+                            "aria-label": "Home",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                className: "pi pi-home",
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    trail.map((entry, index)=>/*#__PURE__*/ jsxRuntime.jsxs(react.Fragment, {
+                            children: [
+                                (!!home || index > 0) && /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Separator, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                        className: "pi pi-chevron-right",
+                                        "aria-hidden": "true"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Item, {
+                                    children: entry.url ? /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Link, {
+                                        as: "a",
+                                        href: entry.url,
+                                        children: entry.label
+                                    }) : /*#__PURE__*/ jsxRuntime.jsx(breadcrumb.Breadcrumb.Current, {
+                                        children: entry.label
+                                    })
+                                })
+                            ]
+                        }, `${index}-${entry.label}`))
+                ]
+            })
         })
     });
 }

package/dist/cjs/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,qCAAmBF,OAAAA,EAAS,kBAAA,CAAA;IACzC,MAAMG,KAAAA,GAAQC,8BAAYJ,OAAAA,EAAS,OAAA,CAAA,CAASK,GAAG,CAC3C,CAACC,QAAyB;AACtBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,GAAAA,EAAKD,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;AAC1B,QAAA,QAAA,gBAAAH,cAAA,CAACI,qBAAAA,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,qCAAmBF,OAAAA,EAAS,kBAAA,CAAA;IACzC,MAAMG,KAAAA,GAAQC,8BAAYJ,OAAAA,EAAS,OAAA,CAAA,CAASK,GAAG,CAC3C,CAACC,QAAqB;AAClBC,YAAAA,KAAAA,EAAOC,+BAAaF,IAAAA,EAAM,OAAA,CAAA;YAC1BG,GAAAA,EAAKD,8BAAAA,CAAaF,MAAM,cAAA,CAAA,GAAkB,CAAC,EAAE,EAAEE,8BAAAA,CAAaF,IAAAA,EAAM,cAAA,CAAA,CAAA,CAAiB,GAAGI;SAC1F,CAAA,CAAA;AAGJ,IAAA,qBACIC,cAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;gCAC1BH,cAAA,CAACI,sBAAgBC,IAAI,EAAA;oCACjBC,eAAA,CAACF,sBAAgBG,IAAI,EAAA;;oBAChBjB,IAAAA,kBACGU,cAAA,CAACI,sBAAgBI,IAAI,EAAA;gDACjBR,cAAA,CAACI,sBAAgBK,IAAI,EAAA;4BAACC,EAAAA,EAAG,GAAA;4BAAIC,IAAAA,EAAM,CAAC,EAAE,EAAErB,IAAAA,CAAAA,CAAM;4BAAEsB,YAAAA,EAAW,MAAA;AACvD,4BAAA,QAAA,gBAAAZ,cAAA,CAACa,GAAAA,EAAAA;gCAAEC,SAAAA,EAAU,YAAA;gCAAaC,aAAAA,EAAY;;;;AAIjDvB,oBAAAA,KAAAA,CAAME,GAAG,CAAC,CAACsB,KAAAA,EAAOC,sBACfX,eAAA,CAACY,cAAAA,EAAAA;;gCACK,CAAA,CAAC,CAAC5B,IAAAA,IAAQ2B,KAAAA,GAAQ,CAAA,mBAChBjB,cAAA,CAACI,sBAAgBe,SAAS,EAAA;AACtB,oCAAA,QAAA,gBAAAnB,cAAA,CAACa,GAAAA,EAAAA;wCAAEC,SAAAA,EAAU,qBAAA;wCAAsBC,aAAAA,EAAY;;;AAGvD,8CAAAf,cAAA,CAACI,sBAAgBI,IAAI,EAAA;AAChBQ,oCAAAA,QAAAA,EAAAA,KAAAA,CAAMlB,GAAG,iBACNE,cAAA,CAACI,qBAAAA,CAAgBK,IAAI,EAAA;wCAACC,EAAAA,EAAG,GAAA;AAAIC,wCAAAA,IAAAA,EAAMK,MAAMlB,GAAG;AACvCkB,wCAAAA,QAAAA,EAAAA,KAAAA,CAAMpB;AAGX,qCAAA,CAAA,iBAAAI,cAAA,CAACI,sBAAgBgB,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/cjs/shell/ConfigPanel.js

@@ -1,9 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var button = require('primereact/button');
-var sidebar = require('primereact/sidebar');
+var drawer = require('primereact/drawer');
 var ColorScheme = require('../configuration/ColorScheme.js');
 var MenuTheme = require('../configuration/MenuTheme.js');
 var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
@@ -27,98 +26,128 @@ var elementProperties = require('./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] = react.useState(false);
     const { config, setColorScheme, setMenuTheme } = LayoutConfigProvider.useLayoutConfig();
     const title = elementProperties.readString(element, 'title', 'Settings');
     const showsMenuTheme = elementProperties.readBoolean(element, 'showMenuTheme', true);
     const showsMode = elementProperties.readBoolean(element, 'showLayoutMode', true);
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Root, {
+        position: "right",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                type: "button",
+            /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Trigger, {
+                as: button.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__*/ jsxRuntime.jsx("i", {
+                    className: "pi pi-cog",
+                    "aria-hidden": "true"
+                })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(sidebar.Sidebar, {
-                visible: isVisible,
-                position: "right",
-                header: title,
-                onHide: ()=>setIsVisible(false),
-                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    className: "layout-config-panel",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
-                                    className: "layout-config-section-title",
-                                    children: "Color scheme"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                    className: "layout-config-options",
-                                    role: "group",
-                                    "aria-label": "Color scheme",
-                                    children: ColorScheme.colorSchemes.map((scheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
-                                            type: "button",
-                                            className: "layout-config-option",
-                                            "aria-pressed": config.colorScheme === scheme,
-                                            onClick: ()=>setColorScheme(scheme),
-                                            children: colorSchemeLabels[scheme]
-                                        }, scheme))
+            /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Portal, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Backdrop, {}),
+                    /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Popup, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(drawer.Drawer.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Title, {
+                                        children: title
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Close, {
+                                        "aria-label": `Close ${title}`,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                            className: "pi pi-times",
+                                            "aria-hidden": "true"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(drawer.Drawer.Content, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "layout-config-panel",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                                    className: "layout-config-section-title",
+                                                    children: "Color scheme"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    className: "layout-config-options",
+                                                    role: "group",
+                                                    "aria-label": "Color scheme",
+                                                    children: ColorScheme.colorSchemes.map((scheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                            type: "button",
+                                                            className: "layout-config-option",
+                                                            "aria-pressed": config.colorScheme === scheme,
+                                                            onClick: ()=>setColorScheme(scheme),
+                                                            children: colorSchemeLabels[scheme]
+                                                        }, scheme))
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(ThemeSwitcher.ThemeSwitcher, {
+                                            element: {
+                                                ...element,
+                                                id: `${element.id}-theme`,
+                                                properties: {
+                                                    ...element.properties,
+                                                    label: 'Theme'
+                                                }
+                                            },
+                                            slots: {}
+                                        }),
+                                        showsMode && /*#__PURE__*/ jsxRuntime.jsx(LayoutModeSwitcher.LayoutModeSwitcher, {
+                                            element: {
+                                                ...element,
+                                                id: `${element.id}-mode`,
+                                                properties: {
+                                                    label: 'Menu mode'
+                                                }
+                                            },
+                                            slots: {}
+                                        }),
+                                        showsMenuTheme && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                                    className: "layout-config-section-title",
+                                                    children: "Menu theme"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    className: "layout-config-options",
+                                                    role: "group",
+                                                    "aria-label": "Menu theme",
+                                                    children: MenuTheme.menuThemes.map((menuTheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                            type: "button",
+                                                            className: "layout-config-option",
+                                                            "aria-pressed": config.menuTheme === menuTheme,
+                                                            onClick: ()=>setMenuTheme(menuTheme),
+                                                            children: menuThemeLabels[menuTheme]
+                                                        }, menuTheme))
+                                                })
+                                            ]
+                                        }),
+                                        slots.content
+                                    ]
                                 })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(ThemeSwitcher.ThemeSwitcher, {
-                            element: {
-                                ...element,
-                                id: `${element.id}-theme`,
-                                properties: {
-                                    ...element.properties,
-                                    label: 'Theme'
-                                }
-                            },
-                            slots: {}
-                        }),
-                        showsMode && /*#__PURE__*/ jsxRuntime.jsx(LayoutModeSwitcher.LayoutModeSwitcher, {
-                            element: {
-                                ...element,
-                                id: `${element.id}-mode`,
-                                properties: {
-                                    label: 'Menu mode'
-                                }
-                            },
-                            slots: {}
-                        }),
-                        showsMenuTheme && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
-                                    className: "layout-config-section-title",
-                                    children: "Menu theme"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                    className: "layout-config-options",
-                                    role: "group",
-                                    "aria-label": "Menu theme",
-                                    children: MenuTheme.menuThemes.map((menuTheme)=>/*#__PURE__*/ jsxRuntime.jsx("button", {
-                                            type: "button",
-                                            className: "layout-config-option",
-                                            "aria-pressed": config.menuTheme === menuTheme,
-                                            onClick: ()=>setMenuTheme(menuTheme),
-                                            children: menuThemeLabels[menuTheme]
-                                        }, menuTheme))
-                                })
-                            ]
-                        }),
-                        slots.content
-                    ]
-                })
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

package/dist/cjs/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/cjs/shell/Sidebar.js

@@ -33,12 +33,16 @@ var elementProperties = require('./elementProperties.js');
                     }),
                     isPinnable && /*#__PURE__*/ jsxRuntime.jsx(button.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__*/ jsxRuntime.jsx("i", {
+                            className: config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open',
+                            "aria-hidden": "true"
+                        })
                     })
                 ]
             }),

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                        text\n                        rounded\n                        icon={config.isSidebarAnchored ? 'pi pi-lock' : 'pi pi-lock-open'}\n                        aria-label={config.isSidebarAnchored ? 'Unpin the menu' : 'Pin the menu open'}\n                        aria-pressed={config.isSidebarAnchored}\n                        onClick={toggleSidebarAnchor}\n                    />\n                )}\n            </div>\n            {slots.content}\n        </>\n    );\n}\n"],"names":["Sidebar","element","slots","effectiveMode","config","toggleSidebarAnchor","useLayoutConfig","title","readString","isPinnable","isPointerRevealMode","_jsxs","_Fragment","div","className","data-scene-id","id","logo","_jsx","span","Button","type","text","rounded","icon","isSidebarAnchored","aria-label","aria-pressed","onClick","content"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,OAAAA,CAAQ,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAChE,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,oCAAAA,EAAAA;IACvD,MAAMC,KAAAA,GAAQC,6BAAWP,OAAAA,EAAS,OAAA,CAAA;AAClC,IAAA,MAAMQ,aAAaC,2CAAAA,CAAoBP,aAAAA,CAAAA;IAEvC,qBACIQ,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uBAAA;AAAwBC,gBAAAA,eAAAA,EAAed,QAAQe,EAAE;;AAC3Dd,oBAAAA,KAAAA,CAAMe,IAAI;AACVV,oBAAAA,KAAAA,kBAASW,cAAA,CAACC,MAAAA,EAAAA;wBAAKL,SAAAA,EAAU,sBAAA;AAAwBP,wBAAAA,QAAAA,EAAAA;;AACjDE,oBAAAA,UAAAA,kBACGS,cAAA,CAACE,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,IAAI,EAAA,IAAA;wBACJC,OAAO,EAAA,IAAA;wBACPC,IAAAA,EAAMpB,MAAAA,CAAOqB,iBAAiB,GAAG,YAAA,GAAe,iBAAA;wBAChDC,YAAAA,EAAYtB,MAAAA,CAAOqB,iBAAiB,GAAG,gBAAA,GAAmB,mBAAA;AAC1DE,wBAAAA,cAAAA,EAAcvB,OAAOqB,iBAAiB;wBACtCG,OAAAA,EAASvB;;;;AAIpBH,YAAAA,KAAAA,CAAM2B;;;AAGnB;;;;"}
+{"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;;;;"}

package/dist/cjs/shell/Topbar.js

@@ -27,12 +27,16 @@ var elementProperties = require('./elementProperties.js');
                 children: [
                     showsToggle && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
                         type: "button",
-                        text: true,
+                        variant: "text",
                         rounded: true,
-                        icon: "pi pi-bars",
+                        iconOnly: true,
                         "aria-label": config.isSidebarOpen ? 'Close the menu' : 'Open the menu',
                         "aria-expanded": config.isSidebarOpen,
-                        onClick: toggleSidebar
+                        onClick: toggleSidebar,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                            className: "pi pi-bars",
+                            "aria-hidden": "true"
+                        })
                     }),
                     slots.logo,
                     slots.start

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                        text\n                        rounded\n                        icon='pi pi-bars'\n                        aria-label={config.isSidebarOpen ? 'Close the menu' : 'Open the menu'}\n                        aria-expanded={config.isSidebarOpen}\n                        onClick={toggleSidebar}\n                    />\n                )}\n                {slots.logo}\n                {slots.start}\n            </div>\n            {slots.menu}\n            <div className='layout-topbar-end'>{slots.end}</div>\n        </>\n    );\n}\n\nfunction togglesSidebar(mode: LayoutMode): boolean {\n    return mode === LayoutMode.Static || mode === LayoutMode.Overlay;\n}\n"],"names":["Topbar","element","slots","effectiveMode","config","toggleSidebar","useLayoutConfig","showsToggle","readBoolean","togglesSidebar","_jsxs","_Fragment","div","className","data-scene-id","id","_jsx","Button","type","text","rounded","icon","aria-label","isSidebarOpen","aria-expanded","onClick","logo","start","menu","end","mode","LayoutMode","Static","Overlay"],"mappings":";;;;;;;;AAQA;;;;;;;;;;AAUC,IACM,SAASA,MAAAA,CAAO,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAC/D,IAAA,MAAM,EAAEC,aAAa,EAAEC,MAAM,EAAEC,aAAa,EAAE,GAAGC,oCAAAA,EAAAA;AACjD,IAAA,MAAMC,WAAAA,GAAcC,6BAAAA,CAAYP,OAAAA,EAAS,YAAA,EAAc,SAASQ,cAAAA,CAAeN,aAAAA,CAAAA;IAE/E,qBACIO,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,qBAAA;AAAsBC,gBAAAA,eAAAA,EAAeb,QAAQc,EAAE;;AACzDR,oBAAAA,WAAAA,kBACGS,cAAA,CAACC,aAAAA,EAAAA;wBACGC,IAAAA,EAAK,QAAA;wBACLC,IAAI,EAAA,IAAA;wBACJC,OAAO,EAAA,IAAA;wBACPC,IAAAA,EAAK,YAAA;wBACLC,YAAAA,EAAYlB,MAAAA,CAAOmB,aAAa,GAAG,gBAAA,GAAmB,eAAA;AACtDC,wBAAAA,eAAAA,EAAepB,OAAOmB,aAAa;wBACnCE,OAAAA,EAASpB;;AAGhBH,oBAAAA,KAAAA,CAAMwB,IAAI;AACVxB,oBAAAA,KAAAA,CAAMyB;;;AAEVzB,YAAAA,KAAAA,CAAM0B,IAAI;0BACXZ,cAAA,CAACJ,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,mBAAA;AAAqBX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAM2B;;;;AAGtD;AAEA,SAASpB,eAAeqB,IAAgB,EAAA;AACpC,IAAA,OAAOA,SAASC,qBAAAA,CAAWC,MAAM,IAAIF,IAAAA,KAASC,sBAAWE,OAAO;AACpE;;;;"}
+{"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;;;;"}