@cratis/scene.primereact 1.0.0 → 2.0.0

package/dist/esm/menu/Steps.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+export interface StepsProps extends HTMLAttributes<HTMLOListElement> {
+    items?: MenuItem[];
+    activeIndex?: number;
+}
+export declare function Steps({ items, activeIndex, ...rest }: StepsProps): import("react").JSX.Element;
+//# sourceMappingURL=Steps.d.ts.map

package/dist/esm/menu/Steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../menu/Steps.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA0BvC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAIhE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAKnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAqBD,wBAAgB,KAAK,CAAC,EAAE,KAAU,EAAE,WAAe,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAiBzE"}

package/dist/esm/menu/Steps.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { MenuItemContent } from './MenuItemContent.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const listStyle = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    color: 'var(--scene-text-color)'
+};
+const markerStyle = {
+    width: '1.75rem',
+    height: '1.75rem',
+    borderRadius: '50%',
+    border: '1px solid var(--scene-surface-border)',
+    background: 'var(--scene-surface-card)',
+    color: 'var(--scene-text-muted-color)'
+};
+const reachedMarkerStyle = {
+    ...markerStyle,
+    background: 'var(--scene-primary-color)',
+    borderColor: 'var(--scene-primary-color)',
+    color: 'var(--scene-primary-contrast-color)'
+};
+const pendingStepStyle = {
+    color: 'var(--scene-text-muted-color)'
+};
+/**
+ * A numbered horizontal indicator of where the user is in a sequence. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/steps` outright. `primereact/stepper` survives,
+ * but it is not a replacement: a stepper owns the content of each step and drives moving between them,
+ * whereas `steps` shows position and nothing else, next to whatever a screen chose to render itself. Scene
+ * has both concepts and they are registered separately, so collapsing one into the other would silently
+ * change what an authored screen means.
+ *
+ * It is an ordered list because that is what it is - a numbered sequence, read in order - and the step the
+ * user is on is marked with `aria-current` rather than only with color, so the position is available to a
+ * screen reader and not just to an eye.
+ *
+ * What it deliberately does not carry over from the v10 `Steps`: the indicator is read-only, so v10's
+ * `readOnly={false}` mode where clicking a step jumped to it is gone, and with it the `onSelect` callback
+ * and the internally held selection. A screen that wants navigable steps should hold the position itself
+ * and render whatever control it wants to move between them. Item templates and the vertical layout are
+ * not supported either.
+ */ function Steps({ items = [], activeIndex = 0, ...rest }) {
+    return /*#__PURE__*/ jsx("ol", {
+        ...rest,
+        className: "flex items-center gap-4",
+        style: listStyle,
+        children: items.map((item, index)=>/*#__PURE__*/ jsxs("li", {
+                className: "inline-flex items-center gap-2",
+                style: index <= activeIndex ? undefined : pendingStepStyle,
+                "aria-current": index === activeIndex ? 'step' : undefined,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "inline-flex items-center justify-center",
+                        "aria-hidden": "true",
+                        style: index <= activeIndex ? reachedMarkerStyle : markerStyle,
+                        children: index + 1
+                    }),
+                    /*#__PURE__*/ jsx(MenuItemContent, {
+                        item: item
+                    })
+                ]
+            }, index))
+    });
+}
+
+export { Steps };
+//# sourceMappingURL=Steps.js.map

package/dist/esm/menu/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.js","sources":["../../../menu/Steps.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 { CSSProperties, HTMLAttributes } from 'react';\nimport { MenuItem } from '../MenuItem';\nimport { MenuItemContent } from './MenuItemContent';\n\nconst listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0, color: 'var(--scene-text-color)' };\n\nconst markerStyle: CSSProperties = {\n    width: '1.75rem',\n    height: '1.75rem',\n    borderRadius: '50%',\n    border: '1px solid var(--scene-surface-border)',\n    background: 'var(--scene-surface-card)',\n    color: 'var(--scene-text-muted-color)',\n};\n\nconst reachedMarkerStyle: CSSProperties = {\n    ...markerStyle,\n    background: 'var(--scene-primary-color)',\n    borderColor: 'var(--scene-primary-color)',\n    color: 'var(--scene-primary-contrast-color)',\n};\n\nconst pendingStepStyle: CSSProperties = { color: 'var(--scene-text-muted-color)' };\n\n/**\n * The configuration {@link Steps} takes.\n */\nexport interface StepsProps extends HTMLAttributes<HTMLOListElement> {\n    /**\n     * The steps in the sequence, in order.\n     */\n    items?: MenuItem[];\n\n    /**\n     * The zero-based step the user is on. Everything before it counts as reached.\n     */\n    activeIndex?: number;\n}\n\n/**\n * A numbered horizontal indicator of where the user is in a sequence. Cratis-owned.\n *\n * This exists because PrimeReact 11 removed `primereact/steps` outright. `primereact/stepper` survives,\n * but it is not a replacement: a stepper owns the content of each step and drives moving between them,\n * whereas `steps` shows position and nothing else, next to whatever a screen chose to render itself. Scene\n * has both concepts and they are registered separately, so collapsing one into the other would silently\n * change what an authored screen means.\n *\n * It is an ordered list because that is what it is - a numbered sequence, read in order - and the step the\n * user is on is marked with `aria-current` rather than only with color, so the position is available to a\n * screen reader and not just to an eye.\n *\n * What it deliberately does not carry over from the v10 `Steps`: the indicator is read-only, so v10's\n * `readOnly={false}` mode where clicking a step jumped to it is gone, and with it the `onSelect` callback\n * and the internally held selection. A screen that wants navigable steps should hold the position itself\n * and render whatever control it wants to move between them. Item templates and the vertical layout are\n * not supported either.\n */\nexport function Steps({ items = [], activeIndex = 0, ...rest }: StepsProps) {\n    return (\n        <ol {...rest} className='flex items-center gap-4' style={listStyle}>\n            {items.map((item, index) => (\n                <li\n                    key={index}\n                    className='inline-flex items-center gap-2'\n                    style={index <= activeIndex ? undefined : pendingStepStyle}\n                    aria-current={index === activeIndex ? 'step' : undefined}>\n                    <span className='inline-flex items-center justify-center' aria-hidden='true' style={index <= activeIndex ? reachedMarkerStyle : markerStyle}>\n                        {index + 1}\n                    </span>\n                    <MenuItemContent item={item} />\n                </li>\n            ))}\n        </ol>\n    );\n}\n"],"names":["listStyle","margin","padding","color","markerStyle","width","height","borderRadius","border","background","reachedMarkerStyle","borderColor","pendingStepStyle","Steps","items","activeIndex","rest","_jsx","ol","className","style","map","item","index","_jsxs","li","undefined","aria-current","span","aria-hidden","MenuItemContent"],"mappings":";;;AAAA;AACA;AAMA,MAAMA,SAAAA,GAA2B;IAAEA,SAAAA,EAAW,MAAA;IAAQC,MAAAA,EAAQ,CAAA;IAAGC,OAAAA,EAAS,CAAA;IAAGC,KAAAA,EAAO;AAA0B,CAAA;AAE9G,MAAMC,WAAAA,GAA6B;IAC/BC,KAAAA,EAAO,SAAA;IACPC,MAAAA,EAAQ,SAAA;IACRC,YAAAA,EAAc,KAAA;IACdC,MAAAA,EAAQ,uCAAA;IACRC,UAAAA,EAAY,2BAAA;IACZN,KAAAA,EAAO;AACX,CAAA;AAEA,MAAMO,kBAAAA,GAAoC;AACtC,IAAA,GAAGN,WAAW;IACdK,UAAAA,EAAY,4BAAA;IACZE,WAAAA,EAAa,4BAAA;IACbR,KAAAA,EAAO;AACX,CAAA;AAEA,MAAMS,gBAAAA,GAAkC;IAAET,KAAAA,EAAO;AAAgC,CAAA;AAiBjF;;;;;;;;;;;;;;;;;;IAmBO,SAASU,KAAAA,CAAM,EAAEC,KAAAA,GAAQ,EAAE,EAAEC,WAAAA,GAAc,CAAC,EAAE,GAAGC,IAAAA,EAAkB,EAAA;AACtE,IAAA,qBACIC,GAAA,CAACC,IAAAA,EAAAA;AAAI,QAAA,GAAGF,IAAI;QAAEG,SAAAA,EAAU,yBAAA;QAA0BC,KAAAA,EAAOpB,SAAAA;AACpDc,QAAAA,QAAAA,EAAAA,KAAAA,CAAMO,GAAG,CAAC,CAACC,IAAAA,EAAMC,sBACdC,IAAA,CAACC,IAAAA,EAAAA;gBAEGN,SAAAA,EAAU,gCAAA;gBACVC,KAAAA,EAAOG,KAAAA,IAASR,cAAcW,SAAAA,GAAYd,gBAAAA;gBAC1Ce,cAAAA,EAAcJ,KAAAA,KAAUR,cAAc,MAAA,GAASW,SAAAA;;kCAC/CT,GAAA,CAACW,MAAAA,EAAAA;wBAAKT,SAAAA,EAAU,yCAAA;wBAA0CU,aAAAA,EAAY,MAAA;wBAAOT,KAAAA,EAAOG,KAAAA,IAASR,cAAcL,kBAAAA,GAAqBN,WAAAA;kCAC3HmB,KAAAA,GAAQ;;kCAEbN,GAAA,CAACa,eAAAA,EAAAA;wBAAgBR,IAAAA,EAAMA;;;AAPlBC,aAAAA,EAAAA,KAAAA,CAAAA;;AAYzB;;;;"}

package/dist/esm/menu/TabMenu.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+export interface TabMenuProps extends HTMLAttributes<HTMLElement> {
+    items?: MenuItem[];
+    activeIndex?: number;
+}
+export declare function TabMenu({ items, activeIndex, ...rest }: TabMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=TabMenu.d.ts.map

package/dist/esm/menu/TabMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../../menu/TabMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,cAAc,EAAY,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAoBvC,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAI7D,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAKnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAoBD,wBAAgB,OAAO,CAAC,EAAE,KAAU,EAAE,WAAe,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiB7E"}

package/dist/esm/menu/TabMenu.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { MenuItemAction } from './MenuItemAction.js';
+
+const barStyle = {
+    borderBottom: '1px solid var(--scene-surface-border)',
+    color: 'var(--scene-text-color)'
+};
+const tabStyle = {
+    background: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    color: 'var(--scene-text-muted-color)',
+    cursor: 'pointer',
+    font: 'inherit',
+    textDecoration: 'none'
+};
+const selectedTabStyle = {
+    ...tabStyle,
+    borderBottomColor: 'var(--scene-primary-color)',
+    color: 'var(--scene-text-color)'
+};
+/**
+ * Tab-styled horizontal navigation between destinations. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/tabmenu` outright. `primereact/tabs` survives and
+ * was the obvious candidate to build on, but it was rejected on purpose: `Tabs.Tab` emits `role="tab"` and
+ * an `aria-controls` pointing at the tab panel it expects to sit beside, and a navigation bar has no
+ * panels. Adopting it would produce markup that announces panels which do not exist and references ids
+ * that resolve to nothing - a real accessibility defect traded for a little less code.
+ *
+ * So this is a `nav` holding links and buttons, with the current entry marked `aria-current`, which is the
+ * pattern the tabs look is imitating. The tab appearance is styling; the semantics are navigation, and
+ * they now agree.
+ *
+ * What it deliberately does not carry over from the v10 `TabMenu`: there is no roving-focus keyboard model
+ * with arrow keys moving between entries - the entries are ordinary links and buttons in the tab order -
+ * no scroll buttons when the entries overflow, no sliding active-bar animation, and no item templates. The
+ * selected entry is held here so the control responds in a preview, exactly as the v10 adapter did.
+ */ function TabMenu({ items = [], activeIndex = 0, ...rest }) {
+    const [selectedIndex, setSelectedIndex] = useState(activeIndex);
+    return /*#__PURE__*/ jsx("nav", {
+        ...rest,
+        className: "flex items-center gap-2",
+        style: barStyle,
+        children: items.map((item, index)=>/*#__PURE__*/ jsx(MenuItemAction, {
+                item: item,
+                current: index === selectedIndex,
+                className: "inline-flex items-center gap-2 p-3",
+                style: index === selectedIndex ? selectedTabStyle : tabStyle,
+                onActivate: ()=>setSelectedIndex(index)
+            }, index))
+    });
+}
+
+export { TabMenu };
+//# sourceMappingURL=TabMenu.js.map

package/dist/esm/menu/TabMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabMenu.js","sources":["../../../menu/TabMenu.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 { CSSProperties, HTMLAttributes, useState } from 'react';\nimport { MenuItem } from '../MenuItem';\nimport { MenuItemAction } from './MenuItemAction';\n\nconst barStyle: CSSProperties = { borderBottom: '1px solid var(--scene-surface-border)', color: 'var(--scene-text-color)' };\n\nconst tabStyle: CSSProperties = {\n    background: 'transparent',\n    border: 'none',\n    borderBottom: '2px solid transparent',\n    color: 'var(--scene-text-muted-color)',\n    cursor: 'pointer',\n    font: 'inherit',\n    textDecoration: 'none',\n};\n\nconst selectedTabStyle: CSSProperties = { ...tabStyle, borderBottomColor: 'var(--scene-primary-color)', color: 'var(--scene-text-color)' };\n\n/**\n * The configuration {@link TabMenu} takes.\n */\nexport interface TabMenuProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * The destinations to show, in order.\n     */\n    items?: MenuItem[];\n\n    /**\n     * The zero-based entry to start on.\n     */\n    activeIndex?: number;\n}\n\n/**\n * Tab-styled horizontal navigation between destinations. Cratis-owned.\n *\n * This exists because PrimeReact 11 removed `primereact/tabmenu` outright. `primereact/tabs` survives and\n * was the obvious candidate to build on, but it was rejected on purpose: `Tabs.Tab` emits `role=\"tab\"` and\n * an `aria-controls` pointing at the tab panel it expects to sit beside, and a navigation bar has no\n * panels. Adopting it would produce markup that announces panels which do not exist and references ids\n * that resolve to nothing - a real accessibility defect traded for a little less code.\n *\n * So this is a `nav` holding links and buttons, with the current entry marked `aria-current`, which is the\n * pattern the tabs look is imitating. The tab appearance is styling; the semantics are navigation, and\n * they now agree.\n *\n * What it deliberately does not carry over from the v10 `TabMenu`: there is no roving-focus keyboard model\n * with arrow keys moving between entries - the entries are ordinary links and buttons in the tab order -\n * no scroll buttons when the entries overflow, no sliding active-bar animation, and no item templates. The\n * selected entry is held here so the control responds in a preview, exactly as the v10 adapter did.\n */\nexport function TabMenu({ items = [], activeIndex = 0, ...rest }: TabMenuProps) {\n    const [selectedIndex, setSelectedIndex] = useState(activeIndex);\n\n    return (\n        <nav {...rest} className='flex items-center gap-2' style={barStyle}>\n            {items.map((item, index) => (\n                <MenuItemAction\n                    key={index}\n                    item={item}\n                    current={index === selectedIndex}\n                    className='inline-flex items-center gap-2 p-3'\n                    style={index === selectedIndex ? selectedTabStyle : tabStyle}\n                    onActivate={() => setSelectedIndex(index)}\n                />\n            ))}\n        </nav>\n    );\n}\n"],"names":["barStyle","borderBottom","color","tabStyle","background","border","cursor","font","textDecoration","selectedTabStyle","borderBottomColor","TabMenu","items","activeIndex","rest","selectedIndex","setSelectedIndex","useState","_jsx","nav","className","style","map","item","index","MenuItemAction","current","onActivate"],"mappings":";;;;AAOA,MAAMA,QAAAA,GAA0B;IAAEC,YAAAA,EAAc,uCAAA;IAAyCC,KAAAA,EAAO;AAA0B,CAAA;AAE1H,MAAMC,QAAAA,GAA0B;IAC5BC,UAAAA,EAAY,aAAA;IACZC,MAAAA,EAAQ,MAAA;IACRJ,YAAAA,EAAc,uBAAA;IACdC,KAAAA,EAAO,+BAAA;IACPI,MAAAA,EAAQ,SAAA;IACRC,IAAAA,EAAM,SAAA;IACNC,cAAAA,EAAgB;AACpB,CAAA;AAEA,MAAMC,gBAAAA,GAAkC;AAAE,IAAA,GAAGN,QAAQ;IAAEO,iBAAAA,EAAmB,4BAAA;IAA8BR,KAAAA,EAAO;AAA0B,CAAA;AAiBzI;;;;;;;;;;;;;;;;;IAkBO,SAASS,OAAAA,CAAQ,EAAEC,KAAAA,GAAQ,EAAE,EAAEC,WAAAA,GAAc,CAAC,EAAE,GAAGC,IAAAA,EAAoB,EAAA;AAC1E,IAAA,MAAM,CAACC,aAAAA,EAAeC,gBAAAA,CAAiB,GAAGC,QAAAA,CAASJ,WAAAA,CAAAA;AAEnD,IAAA,qBACIK,GAAA,CAACC,KAAAA,EAAAA;AAAK,QAAA,GAAGL,IAAI;QAAEM,SAAAA,EAAU,yBAAA;QAA0BC,KAAAA,EAAOrB,QAAAA;AACrDY,QAAAA,QAAAA,EAAAA,KAAAA,CAAMU,GAAG,CAAC,CAACC,IAAAA,EAAMC,sBACdN,GAAA,CAACO,cAAAA,EAAAA;gBAEGF,IAAAA,EAAMA,IAAAA;AACNG,gBAAAA,OAAAA,EAASF,KAAAA,KAAUT,aAAAA;gBACnBK,SAAAA,EAAU,oCAAA;gBACVC,KAAAA,EAAOG,KAAAA,KAAUT,gBAAgBN,gBAAAA,GAAmBN,QAAAA;AACpDwB,gBAAAA,UAAAA,EAAY,IAAMX,gBAAAA,CAAiBQ,KAAAA;AAL9BA,aAAAA,EAAAA,KAAAA,CAAAA;;AAUzB;;;;"}

package/dist/esm/menu/TieredMenu.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { MenuItem } from '../MenuItem';
+export interface TieredMenuProps extends HTMLAttributes<HTMLDivElement> {
+    items?: MenuItem[];
+}
+export declare function TieredMenu({ items, ...rest }: TieredMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=TieredMenu.d.ts.map

package/dist/esm/menu/TieredMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TieredMenu.d.ts","sourceRoot":"","sources":["../../../menu/TieredMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,cAAc,EAAY,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwCvC,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAInE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAqBD,wBAAgB,UAAU,CAAC,EAAE,KAAU,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAMlE"}

package/dist/esm/menu/TieredMenu.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { MenuItemAction } from './MenuItemAction.js';
+import { MenuItemContent } from './MenuItemContent.js';
+
+const rootStyle = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)',
+    width: 'fit-content'
+};
+const listStyle = {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    minWidth: '12rem'
+};
+const entryStyle = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%'
+};
+const submenuStyle = {
+    position: 'absolute',
+    top: 0,
+    left: '100%',
+    zIndex: 1,
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)'
+};
+const separatorStyle = {
+    borderTop: '1px solid var(--scene-surface-border)',
+    margin: 0
+};
+/**
+ * A vertical menu whose submenus open to the side, to any depth. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/tieredmenu` outright, with no successor and no
+ * headless hook. The surviving `primereact/menu` parts can nest through `Menu.Submenu`, but only inside a
+ * popup anchored to a trigger; a tiered menu is an *inline* control that is already open, which those
+ * parts have no shape for. Rebuilding it as plain markup is both smaller and more honest than bending an
+ * overlay into standing still.
+ *
+ * Depth is the one thing this keeps unrestricted, because depth is the whole point of the component: each
+ * level renders the same way and holds its own open child, so an authored model nests as far as its
+ * author took it.
+ *
+ * What it deliberately does not carry over from the v10 `TieredMenu`: submenus open on click, never on
+ * hover; there is no roving-focus keyboard model with arrow keys walking levels, only the tab order the
+ * browser gives; the popup form (`popup` plus an imperative `toggle`) is gone entirely, since Scene only
+ * ever rendered the inline one; opening a deep branch does not flip the level to the other side when it
+ * would run off the viewport; and item templates are not supported.
+ */ function TieredMenu({ items = [], ...rest }) {
+    return /*#__PURE__*/ jsx("div", {
+        ...rest,
+        style: rootStyle,
+        children: /*#__PURE__*/ jsx(TieredMenuLevel, {
+            items: items
+        })
+    });
+}
+/**
+ * One level of a tiered menu, holding which of its own entries is currently expanded.
+ *
+ * Keeping the open entry per level rather than as one path in the root is what makes the recursion
+ * trivial: a level knows only about its own children, so it can render another of itself for them without
+ * threading an index path down and back.
+ */ function TieredMenuLevel({ items }) {
+    const [openIndex, setOpenIndex] = useState(undefined);
+    return /*#__PURE__*/ jsx("ul", {
+        role: "menu",
+        style: listStyle,
+        children: items.map((item, index)=>{
+            if (item.separator === true) return /*#__PURE__*/ jsx("li", {
+                role: "separator",
+                style: separatorStyle
+            }, index);
+            const children = item.items ?? [];
+            return /*#__PURE__*/ jsx("li", {
+                role: "none",
+                className: "relative",
+                children: children.length > 0 ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            role: "menuitem",
+                            className: "flex items-center gap-2 p-3",
+                            style: entryStyle,
+                            disabled: item.disabled,
+                            "aria-haspopup": "true",
+                            "aria-expanded": openIndex === index,
+                            onClick: ()=>setOpenIndex(openIndex === index ? undefined : index),
+                            children: [
+                                /*#__PURE__*/ jsx(MenuItemContent, {
+                                    item: item
+                                }),
+                                /*#__PURE__*/ jsx("i", {
+                                    className: "pi pi-angle-right",
+                                    "aria-hidden": "true"
+                                })
+                            ]
+                        }),
+                        openIndex === index && /*#__PURE__*/ jsx("div", {
+                            style: submenuStyle,
+                            children: /*#__PURE__*/ jsx(TieredMenuLevel, {
+                                items: children
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx(MenuItemAction, {
+                    item: item,
+                    role: "menuitem",
+                    className: "flex items-center gap-2 p-3",
+                    style: entryStyle
+                })
+            }, index);
+        })
+    });
+}
+
+export { TieredMenu };
+//# sourceMappingURL=TieredMenu.js.map

package/dist/esm/menu/TieredMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TieredMenu.js","sources":["../../../menu/TieredMenu.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 { CSSProperties, HTMLAttributes, useState } from 'react';\nimport { MenuItem } from '../MenuItem';\nimport { MenuItemAction } from './MenuItemAction';\nimport { MenuItemContent } from './MenuItemContent';\n\nconst rootStyle: CSSProperties = {\n    background: 'var(--scene-surface-card)',\n    border: '1px solid var(--scene-surface-border)',\n    borderRadius: 'var(--scene-content-border-radius)',\n    color: 'var(--scene-text-color)',\n    width: 'fit-content',\n};\n\nconst listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0, minWidth: '12rem' };\n\nconst entryStyle: CSSProperties = {\n    background: 'transparent',\n    border: 'none',\n    color: 'inherit',\n    cursor: 'pointer',\n    font: 'inherit',\n    textAlign: 'left',\n    textDecoration: 'none',\n    width: '100%',\n};\n\nconst submenuStyle: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: '100%',\n    zIndex: 1,\n    background: 'var(--scene-surface-overlay)',\n    border: '1px solid var(--scene-surface-border)',\n    borderRadius: 'var(--scene-content-border-radius)',\n};\n\nconst separatorStyle: CSSProperties = { borderTop: '1px solid var(--scene-surface-border)', margin: 0 };\n\n/**\n * The configuration {@link TieredMenu} takes.\n */\nexport interface TieredMenuProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * The commands to show. Nesting is followed to any depth - each level opens beside its parent.\n     */\n    items?: MenuItem[];\n}\n\n/**\n * A vertical menu whose submenus open to the side, to any depth. Cratis-owned.\n *\n * This exists because PrimeReact 11 removed `primereact/tieredmenu` outright, with no successor and no\n * headless hook. The surviving `primereact/menu` parts can nest through `Menu.Submenu`, but only inside a\n * popup anchored to a trigger; a tiered menu is an *inline* control that is already open, which those\n * parts have no shape for. Rebuilding it as plain markup is both smaller and more honest than bending an\n * overlay into standing still.\n *\n * Depth is the one thing this keeps unrestricted, because depth is the whole point of the component: each\n * level renders the same way and holds its own open child, so an authored model nests as far as its\n * author took it.\n *\n * What it deliberately does not carry over from the v10 `TieredMenu`: submenus open on click, never on\n * hover; there is no roving-focus keyboard model with arrow keys walking levels, only the tab order the\n * browser gives; the popup form (`popup` plus an imperative `toggle`) is gone entirely, since Scene only\n * ever rendered the inline one; opening a deep branch does not flip the level to the other side when it\n * would run off the viewport; and item templates are not supported.\n */\nexport function TieredMenu({ items = [], ...rest }: TieredMenuProps) {\n    return (\n        <div {...rest} style={rootStyle}>\n            <TieredMenuLevel items={items} />\n        </div>\n    );\n}\n\n/**\n * The configuration one level of a tiered menu takes.\n */\ninterface TieredMenuLevelProps {\n    /**\n     * The entries at this level.\n     */\n    items: MenuItem[];\n}\n\n/**\n * One level of a tiered menu, holding which of its own entries is currently expanded.\n *\n * Keeping the open entry per level rather than as one path in the root is what makes the recursion\n * trivial: a level knows only about its own children, so it can render another of itself for them without\n * threading an index path down and back.\n */\nfunction TieredMenuLevel({ items }: TieredMenuLevelProps) {\n    const [openIndex, setOpenIndex] = useState<number | undefined>(undefined);\n\n    return (\n        <ul role='menu' style={listStyle}>\n            {items.map((item, index) => {\n                if (item.separator === true) return <li key={index} role='separator' style={separatorStyle} />;\n\n                const children = item.items ?? [];\n\n                return (\n                    <li key={index} role='none' className='relative'>\n                        {children.length > 0 ? (\n                            <>\n                                <button\n                                    type='button'\n                                    role='menuitem'\n                                    className='flex items-center gap-2 p-3'\n                                    style={entryStyle}\n                                    disabled={item.disabled}\n                                    aria-haspopup='true'\n                                    aria-expanded={openIndex === index}\n                                    onClick={() => setOpenIndex(openIndex === index ? undefined : index)}>\n                                    <MenuItemContent item={item} />\n                                    <i className='pi pi-angle-right' aria-hidden='true' />\n                                </button>\n                                {openIndex === index && (\n                                    <div style={submenuStyle}>\n                                        <TieredMenuLevel items={children} />\n                                    </div>\n                                )}\n                            </>\n                        ) : (\n                            <MenuItemAction item={item} role='menuitem' className='flex items-center gap-2 p-3' style={entryStyle} />\n                        )}\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"names":["rootStyle","background","border","borderRadius","color","width","listStyle","margin","padding","minWidth","entryStyle","cursor","font","textAlign","textDecoration","submenuStyle","position","top","left","zIndex","separatorStyle","borderTop","TieredMenu","items","rest","_jsx","div","style","TieredMenuLevel","openIndex","setOpenIndex","useState","undefined","ul","role","map","item","index","separator","li","children","className","length","_jsxs","_Fragment","button","type","disabled","aria-haspopup","aria-expanded","onClick","MenuItemContent","i","aria-hidden","MenuItemAction"],"mappings":";;;;;AAQA,MAAMA,SAAAA,GAA2B;IAC7BC,UAAAA,EAAY,2BAAA;IACZC,MAAAA,EAAQ,uCAAA;IACRC,YAAAA,EAAc,oCAAA;IACdC,KAAAA,EAAO,yBAAA;IACPC,KAAAA,EAAO;AACX,CAAA;AAEA,MAAMC,SAAAA,GAA2B;IAAEA,SAAAA,EAAW,MAAA;IAAQC,MAAAA,EAAQ,CAAA;IAAGC,OAAAA,EAAS,CAAA;IAAGC,QAAAA,EAAU;AAAQ,CAAA;AAE/F,MAAMC,UAAAA,GAA4B;IAC9BT,UAAAA,EAAY,aAAA;IACZC,MAAAA,EAAQ,MAAA;IACRE,KAAAA,EAAO,SAAA;IACPO,MAAAA,EAAQ,SAAA;IACRC,IAAAA,EAAM,SAAA;IACNC,SAAAA,EAAW,MAAA;IACXC,cAAAA,EAAgB,MAAA;IAChBT,KAAAA,EAAO;AACX,CAAA;AAEA,MAAMU,YAAAA,GAA8B;IAChCC,QAAAA,EAAU,UAAA;IACVC,GAAAA,EAAK,CAAA;IACLC,IAAAA,EAAM,MAAA;IACNC,MAAAA,EAAQ,CAAA;IACRlB,UAAAA,EAAY,8BAAA;IACZC,MAAAA,EAAQ,uCAAA;IACRC,YAAAA,EAAc;AAClB,CAAA;AAEA,MAAMiB,cAAAA,GAAgC;IAAEC,SAAAA,EAAW,uCAAA;IAAyCd,MAAAA,EAAQ;AAAE,CAAA;AAYtG;;;;;;;;;;;;;;;;;;IAmBO,SAASe,UAAAA,CAAW,EAAEC,QAAQ,EAAE,EAAE,GAAGC,IAAAA,EAAuB,EAAA;AAC/D,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;AAAK,QAAA,GAAGF,IAAI;QAAEG,KAAAA,EAAO3B,SAAAA;AAClB,QAAA,QAAA,gBAAAyB,GAAA,CAACG,eAAAA,EAAAA;YAAgBL,KAAAA,EAAOA;;;AAGpC;AAYA;;;;;;AAMC,IACD,SAASK,eAAAA,CAAgB,EAAEL,KAAK,EAAwB,EAAA;AACpD,IAAA,MAAM,CAACM,SAAAA,EAAWC,YAAAA,CAAa,GAAGC,QAAAA,CAA6BC,SAAAA,CAAAA;AAE/D,IAAA,qBACIP,GAAA,CAACQ,IAAAA,EAAAA;QAAGC,IAAAA,EAAK,MAAA;QAAOP,KAAAA,EAAOrB,SAAAA;kBAClBiB,KAAAA,CAAMY,GAAG,CAAC,CAACC,IAAAA,EAAMC,KAAAA,GAAAA;AACd,YAAA,IAAID,IAAAA,CAAKE,SAAS,KAAK,IAAA,EAAM,qBAAOb,GAAA,CAACc,IAAAA,EAAAA;gBAAeL,IAAAA,EAAK,WAAA;gBAAYP,KAAAA,EAAOP;AAA/BiB,aAAAA,EAAAA,KAAAA,CAAAA;AAE7C,YAAA,MAAMG,QAAAA,GAAWJ,IAAAA,CAAKb,KAAK,IAAI,EAAE;AAEjC,YAAA,qBACIE,GAAA,CAACc,IAAAA,EAAAA;gBAAeL,IAAAA,EAAK,MAAA;gBAAOO,SAAAA,EAAU,UAAA;0BACjCD,QAAAA,CAASE,MAAM,GAAG,CAAA,iBACfC,IAAA,CAAAC,QAAA,EAAA;;sCACID,IAAA,CAACE,QAAAA,EAAAA;4BACGC,IAAAA,EAAK,QAAA;4BACLZ,IAAAA,EAAK,UAAA;4BACLO,SAAAA,EAAU,6BAAA;4BACVd,KAAAA,EAAOjB,UAAAA;AACPqC,4BAAAA,QAAAA,EAAUX,KAAKW,QAAQ;4BACvBC,eAAAA,EAAc,MAAA;AACdC,4BAAAA,eAAAA,EAAepB,SAAAA,KAAcQ,KAAAA;AAC7Ba,4BAAAA,OAAAA,EAAS,IAAMpB,YAAAA,CAAaD,SAAAA,KAAcQ,KAAAA,GAAQL,SAAAA,GAAYK,KAAAA,CAAAA;;8CAC9DZ,GAAA,CAAC0B,eAAAA,EAAAA;oCAAgBf,IAAAA,EAAMA;;8CACvBX,GAAA,CAAC2B,GAAAA,EAAAA;oCAAEX,SAAAA,EAAU,mBAAA;oCAAoBY,aAAAA,EAAY;;;;AAEhDxB,wBAAAA,SAAAA,KAAcQ,uBACXZ,GAAA,CAACC,KAAAA,EAAAA;4BAAIC,KAAAA,EAAOZ,YAAAA;AACR,4BAAA,QAAA,gBAAAU,GAAA,CAACG,eAAAA,EAAAA;gCAAgBL,KAAAA,EAAOiB;;;;mCAKpCf,GAAA,CAAC6B,cAAAA,EAAAA;oBAAelB,IAAAA,EAAMA,IAAAA;oBAAMF,IAAAA,EAAK,UAAA;oBAAWO,SAAAA,EAAU,6BAAA;oBAA8Bd,KAAAA,EAAOjB;;AAtB1F2B,aAAAA,EAAAA,KAAAA,CAAAA;AA0BjB,QAAA,CAAA;;AAGZ;;;;"}

package/dist/esm/menu/index.d.ts

@@ -1,3 +1,13 @@
+export * from './MenuItemContent';
+export * from './MenuItemAction';
+export * from './DockPosition';
+export * from './Menubar';
+export * from './MegaMenu';
+export * from './TieredMenu';
+export * from './Steps';
+export * from './TabMenu';
+export * from './PanelMenu';
+export * from './Dock';
 export * from './PrimeMenu';
 export * from './PrimeMenubar';
 export * from './PrimeBreadcrumb';

package/dist/esm/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAGA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAGA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}

package/dist/esm/menu/index.js

@@ -1,3 +1,13 @@
+export * from './MenuItemContent';
+export * from './MenuItemAction';
+export * from './DockPosition';
+export * from './Menubar';
+export * from './MegaMenu';
+export * from './TieredMenu';
+export * from './Steps';
+export * from './TabMenu';
+export * from './PanelMenu';
+export * from './Dock';
 export * from './PrimeMenu';
 export * from './PrimeMenubar';
 export * from './PrimeBreadcrumb';

package/dist/esm/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAGA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAGA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}

package/dist/esm/menuItems.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from 'primereact/menuitem';
+import { MenuItem } from './MenuItem';
 import { SceneElement } from '@cratis/scene.model';
 export declare function toMenuItems(entries: unknown[]): MenuItem[];
 export declare function menuItemsProperty(element: SceneElement, name: string): MenuItem[];

package/dist/esm/menuItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuItems.d.ts","sourceRoot":"","sources":["../../menuItems.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAkBnD,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAuB1D;AASD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAEjF"}
+{"version":3,"file":"menuItems.d.ts","sourceRoot":"","sources":["../../menuItems.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAkBnD,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAuB1D;AASD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAEjF"}

package/dist/esm/menuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItems.js","sources":["../../menuItems.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { MenuItem } from 'primereact/menuitem';\nimport { SceneElement } from '@cratis/scene.model';\nimport { arrayProperty } from './properties';\n\n/**\n * Turns raw authored entries into the `MenuItem` model every PrimeReact menu, menubar, breadcrumb,\n * split button and dock takes.\n *\n * Ten different components in this package all want the same nested `{ label, icon, items }` shape, so\n * reading it lives here once rather than in each of them. Nesting is followed to any depth because a\n * menubar and a tiered menu differ only in how deep an author actually goes - the reader should not be\n * the thing that decides.\n *\n * Entries with no usable label are dropped rather than rendered blank, and a `separator: true` entry is\n * kept without one, because that is PrimeReact's own way of spelling a divider.\n *\n * @param entries The raw entries to convert.\n * @returns The converted menu items, in order.\n */\nexport function toMenuItems(entries: unknown[]): MenuItem[] {\n    const items: MenuItem[] = [];\n    for (const entry of entries) {\n        if (typeof entry === 'string') {\n            items.push({ label: entry });\n            continue;\n        }\n\n        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;\n\n        const record = entry as Record<string, unknown>;\n        const item: MenuItem = {};\n        if (typeof record.label === 'string') item.label = record.label;\n        if (typeof record.icon === 'string') item.icon = record.icon;\n        if (typeof record.url === 'string') item.url = record.url;\n        if (typeof record.disabled === 'boolean') item.disabled = record.disabled;\n        if (record.separator === true) item.separator = true;\n        if (Array.isArray(record.items)) item.items = toMenuItems(record.items);\n        if (item.label === undefined && item.separator !== true) continue;\n        items.push(item);\n    }\n\n    return items;\n}\n\n/**\n * Reads a menu model off a Scene element's properties.\n *\n * @param element The element whose properties to read.\n * @param name The property name holding the entries.\n * @returns The converted menu items, empty when the property is missing or is not an array.\n */\nexport function menuItemsProperty(element: SceneElement, name: string): MenuItem[] {\n    return toMenuItems(arrayProperty(element, name));\n}\n"],"names":["toMenuItems","entries","items","entry","push","label","undefined","Array","isArray","record","item","icon","url","disabled","separator","menuItemsProperty","element","name","arrayProperty"],"mappings":";;AAAA;AACA;AAMA;;;;;;;;;;;;;;IAeO,SAASA,WAAAA,CAAYC,OAAkB,EAAA;AAC1C,IAAA,MAAMC,QAAoB,EAAE;IAC5B,KAAK,MAAMC,SAASF,OAAAA,CAAS;QACzB,IAAI,OAAOE,UAAU,QAAA,EAAU;AAC3BD,YAAAA,KAAAA,CAAME,IAAI,CAAC;gBAAEC,KAAAA,EAAOF;AAAM,aAAA,CAAA;AAC1B,YAAA;AACJ,QAAA;QAEA,IAAI,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAUG,SAAAA,IAAaH,UAAU,IAAA,IAAQI,KAAAA,CAAMC,OAAO,CAACL,KAAAA,CAAAA,EAAQ;AAEhG,QAAA,MAAMM,MAAAA,GAASN,KAAAA;AACf,QAAA,MAAMO,OAAiB,EAAC;QACxB,IAAI,OAAOD,OAAOJ,KAAK,KAAK,UAAUK,IAAAA,CAAKL,KAAK,GAAGI,MAAAA,CAAOJ,KAAK;QAC/D,IAAI,OAAOI,OAAOE,IAAI,KAAK,UAAUD,IAAAA,CAAKC,IAAI,GAAGF,MAAAA,CAAOE,IAAI;QAC5D,IAAI,OAAOF,OAAOG,GAAG,KAAK,UAAUF,IAAAA,CAAKE,GAAG,GAAGH,MAAAA,CAAOG,GAAG;QACzD,IAAI,OAAOH,OAAOI,QAAQ,KAAK,WAAWH,IAAAA,CAAKG,QAAQ,GAAGJ,MAAAA,CAAOI,QAAQ;AACzE,QAAA,IAAIJ,OAAOK,SAAS,KAAK,IAAA,EAAMJ,IAAAA,CAAKI,SAAS,GAAG,IAAA;QAChD,IAAIP,KAAAA,CAAMC,OAAO,CAACC,MAAAA,CAAOP,KAAK,CAAA,EAAGQ,IAAAA,CAAKR,KAAK,GAAGF,WAAAA,CAAYS,MAAAA,CAAOP,KAAK,CAAA;AACtE,QAAA,IAAIQ,KAAKL,KAAK,KAAKC,aAAaI,IAAAA,CAAKI,SAAS,KAAK,IAAA,EAAM;AACzDZ,QAAAA,KAAAA,CAAME,IAAI,CAACM,IAAAA,CAAAA;AACf,IAAA;IAEA,OAAOR,KAAAA;AACX;AAEA;;;;;;AAMC,IACM,SAASa,iBAAAA,CAAkBC,OAAqB,EAAEC,IAAY,EAAA;IACjE,OAAOjB,WAAAA,CAAYkB,cAAcF,OAAAA,EAASC,IAAAA,CAAAA,CAAAA;AAC9C;;;;"}
+{"version":3,"file":"menuItems.js","sources":["../../menuItems.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { MenuItem } from './MenuItem';\nimport { SceneElement } from '@cratis/scene.model';\nimport { arrayProperty } from './properties';\n\n/**\n * Turns raw authored entries into the `MenuItem` model every PrimeReact menu, menubar, breadcrumb,\n * split button and dock takes.\n *\n * Ten different components in this package all want the same nested `{ label, icon, items }` shape, so\n * reading it lives here once rather than in each of them. Nesting is followed to any depth because a\n * menubar and a tiered menu differ only in how deep an author actually goes - the reader should not be\n * the thing that decides.\n *\n * Entries with no usable label are dropped rather than rendered blank, and a `separator: true` entry is\n * kept without one, because that is PrimeReact's own way of spelling a divider.\n *\n * @param entries The raw entries to convert.\n * @returns The converted menu items, in order.\n */\nexport function toMenuItems(entries: unknown[]): MenuItem[] {\n    const items: MenuItem[] = [];\n    for (const entry of entries) {\n        if (typeof entry === 'string') {\n            items.push({ label: entry });\n            continue;\n        }\n\n        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;\n\n        const record = entry as Record<string, unknown>;\n        const item: MenuItem = {};\n        if (typeof record.label === 'string') item.label = record.label;\n        if (typeof record.icon === 'string') item.icon = record.icon;\n        if (typeof record.url === 'string') item.url = record.url;\n        if (typeof record.disabled === 'boolean') item.disabled = record.disabled;\n        if (record.separator === true) item.separator = true;\n        if (Array.isArray(record.items)) item.items = toMenuItems(record.items);\n        if (item.label === undefined && item.separator !== true) continue;\n        items.push(item);\n    }\n\n    return items;\n}\n\n/**\n * Reads a menu model off a Scene element's properties.\n *\n * @param element The element whose properties to read.\n * @param name The property name holding the entries.\n * @returns The converted menu items, empty when the property is missing or is not an array.\n */\nexport function menuItemsProperty(element: SceneElement, name: string): MenuItem[] {\n    return toMenuItems(arrayProperty(element, name));\n}\n"],"names":["toMenuItems","entries","items","entry","push","label","undefined","Array","isArray","record","item","icon","url","disabled","separator","menuItemsProperty","element","name","arrayProperty"],"mappings":";;AAAA;AACA;AAMA;;;;;;;;;;;;;;IAeO,SAASA,WAAAA,CAAYC,OAAkB,EAAA;AAC1C,IAAA,MAAMC,QAAoB,EAAE;IAC5B,KAAK,MAAMC,SAASF,OAAAA,CAAS;QACzB,IAAI,OAAOE,UAAU,QAAA,EAAU;AAC3BD,YAAAA,KAAAA,CAAME,IAAI,CAAC;gBAAEC,KAAAA,EAAOF;AAAM,aAAA,CAAA;AAC1B,YAAA;AACJ,QAAA;QAEA,IAAI,OAAOA,KAAAA,KAAU,QAAA,IAAYA,KAAAA,KAAUG,SAAAA,IAAaH,UAAU,IAAA,IAAQI,KAAAA,CAAMC,OAAO,CAACL,KAAAA,CAAAA,EAAQ;AAEhG,QAAA,MAAMM,MAAAA,GAASN,KAAAA;AACf,QAAA,MAAMO,OAAiB,EAAC;QACxB,IAAI,OAAOD,OAAOJ,KAAK,KAAK,UAAUK,IAAAA,CAAKL,KAAK,GAAGI,MAAAA,CAAOJ,KAAK;QAC/D,IAAI,OAAOI,OAAOE,IAAI,KAAK,UAAUD,IAAAA,CAAKC,IAAI,GAAGF,MAAAA,CAAOE,IAAI;QAC5D,IAAI,OAAOF,OAAOG,GAAG,KAAK,UAAUF,IAAAA,CAAKE,GAAG,GAAGH,MAAAA,CAAOG,GAAG;QACzD,IAAI,OAAOH,OAAOI,QAAQ,KAAK,WAAWH,IAAAA,CAAKG,QAAQ,GAAGJ,MAAAA,CAAOI,QAAQ;AACzE,QAAA,IAAIJ,OAAOK,SAAS,KAAK,IAAA,EAAMJ,IAAAA,CAAKI,SAAS,GAAG,IAAA;QAChD,IAAIP,KAAAA,CAAMC,OAAO,CAACC,MAAAA,CAAOP,KAAK,CAAA,EAAGQ,IAAAA,CAAKR,KAAK,GAAGF,WAAAA,CAAYS,MAAAA,CAAOP,KAAK,CAAA;AACtE,QAAA,IAAIQ,KAAKL,KAAK,KAAKC,aAAaI,IAAAA,CAAKI,SAAS,KAAK,IAAA,EAAM;AACzDZ,QAAAA,KAAAA,CAAME,IAAI,CAACM,IAAAA,CAAAA;AACf,IAAA;IAEA,OAAOR,KAAAA;AACX;AAEA;;;;;;AAMC,IACM,SAASa,iBAAAA,CAAkBC,OAAqB,EAAEC,IAAY,EAAA;IACjE,OAAOjB,WAAAA,CAAYkB,cAAcF,OAAAA,EAASC,IAAAA,CAAAA,CAAAA;AAC9C;;;;"}

package/dist/esm/messages/MessageGallery.stories.js

@@ -7,7 +7,7 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         layout: 'padded',
-        docs: { description: { component: 'The message family. `message` and `inlineMessage` share PrimeReact\'s Message component but mean different things on a screen - one is about a region, the other about the field beside it - and the width is the difference a reader sees.' } },
+        docs: { description: { component: 'The message family. `message` and `inlineMessage` share PrimeReact 11\'s singular `message` module but mean different things on a screen - one is about a region, the other about the field beside it - which v11 lets them say with `variant` as well as with width. The plural `messages` module was removed in v11; this package never declared a name for it. `toast` announces itself once on mount, grouped by the element\'s own id, because a Scene element has no other way to make an imperative call.' } },
     },
 };
 export default meta;

package/dist/esm/messages/MessageGallery.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageGallery.stories.js","sourceRoot":"","sources":["../../../messages/MessageGallery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,IAAI,GAAG;IACT,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,6OAA6O,EAAE,EAAE;KACtR;CACoC,CAAC;AAE1C,eAAe,IAAI,CAAC;AAKpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE;YAC7B,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC;YACpG,cAAc,CAAC,eAAe,EAAE,eAAe,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YACzF,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,0BAA0B,EAAE,CAAC;SAClH,CAAC;QACF,QAAQ,EAAE,oBAAoB;QAC9B,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS;KAClC;CACJ,CAAC"}
+{"version":3,"file":"MessageGallery.stories.js","sourceRoot":"","sources":["../../../messages/MessageGallery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,IAAI,GAAG;IACT,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,kfAAkf,EAAE,EAAE;KAC3hB;CACoC,CAAC;AAE1C,eAAe,IAAI,CAAC;AAKpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,OAAO,EAAE,YAAY,CAAC,SAAS,EAAE;YAC7B,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC;YACpG,cAAc,CAAC,eAAe,EAAE,eAAe,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YACzF,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,0BAA0B,EAAE,CAAC;SAClH,CAAC;QACF,QAAQ,EAAE,oBAAoB;QAC9B,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS;KAClC;CACJ,CAAC"}

package/dist/esm/messages/PrimeInlineMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInlineMessage.d.ts","sourceRoot":"","sources":["../../../messages/PrimeInlineMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAS/D,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BASvE"}
+{"version":3,"file":"PrimeInlineMessage.d.ts","sourceRoot":"","sources":["../../../messages/PrimeInlineMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAiC/D,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAgBvE"}

package/dist/esm/messages/PrimeInlineMessage.js

@@ -1,18 +1,54 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Message } from 'primereact/message';
-import { stringProperty } from '../properties.js';
+import { severityProperty, stringProperty } from '../properties.js';
 
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * Deliberately duplicated from `PrimeMessage` rather than shared. Both adapters need it and neither needs
+ * the other, and lifting six lines into a module would put a helper nobody outside this folder wants into
+ * the package's public surface - `index.ts` re-exports everything a file exports.
+ *
+ * The icon is kept even for the compact variant, because severity is otherwise carried by color alone,
+ * and "the red one means you have to fix it" is not information a reader who cannot see the color gets.
+ */ const severityIcons = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle'
+};
 /**
  * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.
  *
  * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation
- * hint reads as belonging to one field rather than to the whole form.
+ * hint reads as belonging to one field rather than to the whole form. PrimeReact 11 gives that intent a
+ * name of its own - `variant='simple'` drops the panel and leaves the icon and the words - which is
+ * exactly what the v10 adapter was approximating with a width class, so the distinction survives the
+ * migration and lands on a real prop rather than on CSS.
+ *
+ * The v11 module is `primereact/message`, singular. The plural `messages` module - a list of notices
+ * driven imperatively - was removed with no replacement, but this package never declared a name for it,
+ * so nothing here is lost with it.
  */ function PrimeInlineMessage({ element }) {
-    return /*#__PURE__*/ jsx(Message, {
+    const severity = severityProperty(element, 'severity', 'info');
+    return /*#__PURE__*/ jsxs(Message.Root, {
         "data-scene-id": element.id,
         className: "inline-flex",
-        severity: stringProperty(element, 'severity', 'info'),
-        text: stringProperty(element, 'text', '')
+        variant: "simple",
+        severity: severity,
+        children: [
+            /*#__PURE__*/ jsx(Message.Icon, {
+                children: /*#__PURE__*/ jsx("i", {
+                    className: severityIcons[severity] ?? severityIcons.info,
+                    "aria-hidden": "true"
+                })
+            }),
+            /*#__PURE__*/ jsx(Message.Content, {
+                children: /*#__PURE__*/ jsx(Message.Text, {
+                    children: stringProperty(element, 'text', '')
+                })
+            })
+        ]
     });
 }
 

package/dist/esm/messages/PrimeInlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeInlineMessage.js","sources":["../../../messages/PrimeInlineMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.\n *\n * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation\n * hint reads as belonging to one field rather than to the whole form.\n */\nexport function PrimeInlineMessage({ element }: RegisteredComponentProps) {\n    return (\n        <Message\n            data-scene-id={element.id}\n            className='inline-flex'\n            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}\n            text={stringProperty(element, 'text', '')}\n        />\n    );\n}\n"],"names":["PrimeInlineMessage","element","_jsx","Message","data-scene-id","id","className","severity","stringProperty","text"],"mappings":";;;;AAOA;;;;;AAKC,IACM,SAASA,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;AACpE,IAAA,qBACIC,GAAA,CAACC,OAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QACzBC,SAAAA,EAAU,aAAA;QACVC,QAAAA,EAAUC,cAAAA,CAAeP,SAAS,UAAA,EAAY,MAAA,CAAA;QAC9CQ,IAAAA,EAAMD,cAAAA,CAAeP,SAAS,MAAA,EAAQ,EAAA;;AAGlD;;;;"}
+{"version":3,"file":"PrimeInlineMessage.js","sources":["../../../messages/PrimeInlineMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {severityProperty, stringProperty} from '../properties';\n\n/**\n * The `primeicons` class that stands for each severity.\n *\n * Deliberately duplicated from `PrimeMessage` rather than shared. Both adapters need it and neither needs\n * the other, and lifting six lines into a module would put a helper nobody outside this folder wants into\n * the package's public surface - `index.ts` re-exports everything a file exports.\n *\n * The icon is kept even for the compact variant, because severity is otherwise carried by color alone,\n * and \"the red one means you have to fix it\" is not information a reader who cannot see the color gets.\n */\nconst severityIcons: Record<string, string> = {\n    success: 'pi pi-check-circle',\n    info: 'pi pi-info-circle',\n    warn: 'pi pi-exclamation-triangle',\n    error: 'pi pi-times-circle',\n};\n\n/**\n * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.\n *\n * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation\n * hint reads as belonging to one field rather than to the whole form. PrimeReact 11 gives that intent a\n * name of its own - `variant='simple'` drops the panel and leaves the icon and the words - which is\n * exactly what the v10 adapter was approximating with a width class, so the distinction survives the\n * migration and lands on a real prop rather than on CSS.\n *\n * The v11 module is `primereact/message`, singular. The plural `messages` module - a list of notices\n * driven imperatively - was removed with no replacement, but this package never declared a name for it,\n * so nothing here is lost with it.\n */\nexport function PrimeInlineMessage({ element }: RegisteredComponentProps) {\n    const severity = severityProperty(element, 'severity', 'info');\n    return (\n        <Message.Root\n            data-scene-id={element.id}\n            className='inline-flex'\n            variant='simple'\n            severity={severity as 'success' | 'info' | 'warn' | 'error'}>\n            <Message.Icon>\n                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />\n            </Message.Icon>\n            <Message.Content>\n                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>\n            </Message.Content>\n        </Message.Root>\n    );\n}\n"],"names":["severityIcons","success","info","warn","error","PrimeInlineMessage","element","severity","severityProperty","_jsxs","Message","Root","data-scene-id","id","className","variant","_jsx","Icon","i","aria-hidden","Content","Text","stringProperty"],"mappings":";;;;AAOA;;;;;;;;;AASC,IACD,MAAMA,aAAAA,GAAwC;IAC1CC,OAAAA,EAAS,oBAAA;IACTC,IAAAA,EAAM,mBAAA;IACNC,IAAAA,EAAM,4BAAA;IACNC,KAAAA,EAAO;AACX,CAAA;AAEA;;;;;;;;;;;;AAYC,IACM,SAASC,kBAAAA,CAAmB,EAAEC,OAAO,EAA4B,EAAA;IACpE,MAAMC,QAAAA,GAAWC,gBAAAA,CAAiBF,OAAAA,EAAS,UAAA,EAAY,MAAA,CAAA;IACvD,qBACIG,IAAA,CAACC,QAAQC,IAAI,EAAA;AACTC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QACzBC,SAAAA,EAAU,aAAA;QACVC,OAAAA,EAAQ,QAAA;QACRR,QAAAA,EAAUA,QAAAA;;AACV,0BAAAS,GAAA,CAACN,QAAQO,IAAI,EAAA;AACT,gBAAA,QAAA,gBAAAD,GAAA,CAACE,GAAAA,EAAAA;AAAEJ,oBAAAA,SAAAA,EAAWd,aAAa,CAACO,QAAAA,CAAS,IAAIP,cAAcE,IAAI;oBAAEiB,aAAAA,EAAY;;;AAE7E,0BAAAH,GAAA,CAACN,QAAQU,OAAO,EAAA;wCACZJ,GAAA,CAACN,QAAQW,IAAI,EAAA;AAAEC,oBAAAA,QAAAA,EAAAA,cAAAA,CAAehB,SAAS,MAAA,EAAQ,EAAA;;;;;AAI/D;;;;"}

package/dist/esm/messages/PrimeMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeMessage.d.ts","sourceRoot":"","sources":["../../../messages/PrimeMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAU/D,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BASjE"}
+{"version":3,"file":"PrimeMessage.d.ts","sourceRoot":"","sources":["../../../messages/PrimeMessage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAkC/D,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,wBAAwB,+BAYjE"}

package/dist/esm/messages/PrimeMessage.js

@@ -1,19 +1,54 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Message } from 'primereact/message';
-import { stringProperty } from '../properties.js';
+import { severityProperty, stringProperty } from '../properties.js';
 
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * PrimeReact 10 chose this icon for you; PrimeReact 11 made the icon a part you compose, which is right
+ * for an application - it can use its own icon set - and wrong for a Scene element, which has no way to
+ * name one. The mapping is restored here so a notice still reads at a glance rather than as an
+ * undifferentiated colored box.
+ */ const severityIcons = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle'
+};
 /**
  * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.
  *
  * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's
  * `Message` component but mean different things on a screen, and the width is the difference a reader
- * actually sees.
+ * actually sees. PrimeReact 11 adds a second axis for the same distinction - `variant` - and this one is
+ * the default, bordered variant, because a region-level notice is meant to be a block you notice.
+ *
+ * The v11 module is `primereact/message`, singular, which is the one that survived; the plural `messages`
+ * module - a list of notices with its own imperative API - was removed outright, and this package never
+ * declared a name for it.
+ *
+ * v10's `warning` is translated to v11's `warn` so screens written against the old vocabulary keep their
+ * color; `error` was and still is spelled the same here, unlike everywhere else in PrimeReact where the
+ * danger severity is called `danger`.
  */ function PrimeMessage({ element }) {
-    return /*#__PURE__*/ jsx(Message, {
+    const severity = severityProperty(element, 'severity', 'info');
+    return /*#__PURE__*/ jsxs(Message.Root, {
         "data-scene-id": element.id,
         className: "w-full",
-        severity: stringProperty(element, 'severity', 'info'),
-        text: stringProperty(element, 'text', '')
+        severity: severity,
+        children: [
+            /*#__PURE__*/ jsx(Message.Icon, {
+                children: /*#__PURE__*/ jsx("i", {
+                    className: severityIcons[severity] ?? severityIcons.info,
+                    "aria-hidden": "true"
+                })
+            }),
+            /*#__PURE__*/ jsx(Message.Content, {
+                children: /*#__PURE__*/ jsx(Message.Text, {
+                    children: stringProperty(element, 'text', '')
+                })
+            })
+        ]
     });
 }
 

package/dist/esm/messages/PrimeMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeMessage.js","sources":["../../../messages/PrimeMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.\n *\n * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's\n * `Message` component but mean different things on a screen, and the width is the difference a reader\n * actually sees.\n */\nexport function PrimeMessage({ element }: RegisteredComponentProps) {\n    return (\n        <Message\n            data-scene-id={element.id}\n            className='w-full'\n            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}\n            text={stringProperty(element, 'text', '')}\n        />\n    );\n}\n"],"names":["PrimeMessage","element","_jsx","Message","data-scene-id","id","className","severity","stringProperty","text"],"mappings":";;;;AAOA;;;;;;AAMC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;AAC9D,IAAA,qBACIC,GAAA,CAACC,OAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeH,QAAQI,EAAE;QACzBC,SAAAA,EAAU,QAAA;QACVC,QAAAA,EAAUC,cAAAA,CAAeP,SAAS,UAAA,EAAY,MAAA,CAAA;QAC9CQ,IAAAA,EAAMD,cAAAA,CAAeP,SAAS,MAAA,EAAQ,EAAA;;AAGlD;;;;"}
+{"version":3,"file":"PrimeMessage.js","sources":["../../../messages/PrimeMessage.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 { Message } from 'primereact/message';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport {severityProperty, stringProperty} from '../properties';\n\n/**\n * The `primeicons` class that stands for each severity.\n *\n * PrimeReact 10 chose this icon for you; PrimeReact 11 made the icon a part you compose, which is right\n * for an application - it can use its own icon set - and wrong for a Scene element, which has no way to\n * name one. The mapping is restored here so a notice still reads at a glance rather than as an\n * undifferentiated colored box.\n */\nconst severityIcons: Record<string, string> = {\n    success: 'pi pi-check-circle',\n    info: 'pi pi-info-circle',\n    warn: 'pi pi-exclamation-triangle',\n    error: 'pi pi-times-circle',\n};\n\n/**\n * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.\n *\n * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's\n * `Message` component but mean different things on a screen, and the width is the difference a reader\n * actually sees. PrimeReact 11 adds a second axis for the same distinction - `variant` - and this one is\n * the default, bordered variant, because a region-level notice is meant to be a block you notice.\n *\n * The v11 module is `primereact/message`, singular, which is the one that survived; the plural `messages`\n * module - a list of notices with its own imperative API - was removed outright, and this package never\n * declared a name for it.\n *\n * v10's `warning` is translated to v11's `warn` so screens written against the old vocabulary keep their\n * color; `error` was and still is spelled the same here, unlike everywhere else in PrimeReact where the\n * danger severity is called `danger`.\n */\nexport function PrimeMessage({ element }: RegisteredComponentProps) {\n    const severity = severityProperty(element, 'severity', 'info');\n    return (\n        <Message.Root data-scene-id={element.id} className='w-full' severity={severity as 'success' | 'info' | 'warn' | 'error'}>\n            <Message.Icon>\n                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />\n            </Message.Icon>\n            <Message.Content>\n                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>\n            </Message.Content>\n        </Message.Root>\n    );\n}\n"],"names":["severityIcons","success","info","warn","error","PrimeMessage","element","severity","severityProperty","_jsxs","Message","Root","data-scene-id","id","className","_jsx","Icon","i","aria-hidden","Content","Text","stringProperty"],"mappings":";;;;AAOA;;;;;;;AAOC,IACD,MAAMA,aAAAA,GAAwC;IAC1CC,OAAAA,EAAS,oBAAA;IACTC,IAAAA,EAAM,mBAAA;IACNC,IAAAA,EAAM,4BAAA;IACNC,KAAAA,EAAO;AACX,CAAA;AAEA;;;;;;;;;;;;;;;AAeC,IACM,SAASC,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;IAC9D,MAAMC,QAAAA,GAAWC,gBAAAA,CAAiBF,OAAAA,EAAS,UAAA,EAAY,MAAA,CAAA;IACvD,qBACIG,IAAA,CAACC,QAAQC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QAAEC,SAAAA,EAAU,QAAA;QAASP,QAAAA,EAAUA,QAAAA;;AAClE,0BAAAQ,GAAA,CAACL,QAAQM,IAAI,EAAA;AACT,gBAAA,QAAA,gBAAAD,GAAA,CAACE,GAAAA,EAAAA;AAAEH,oBAAAA,SAAAA,EAAWd,aAAa,CAACO,QAAAA,CAAS,IAAIP,cAAcE,IAAI;oBAAEgB,aAAAA,EAAY;;;AAE7E,0BAAAH,GAAA,CAACL,QAAQS,OAAO,EAAA;wCACZJ,GAAA,CAACL,QAAQU,IAAI,EAAA;AAAEC,oBAAAA,QAAAA,EAAAA,cAAAA,CAAef,SAAS,MAAA,EAAQ,EAAA;;;;;AAI/D;;;;"}