@cratis/scene.primereact 4.4.0 → 4.6.0

package/dist/cjs/chart/resolveChartType.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var ChartType = require('./ChartType.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The ordinals of the original .NET `PrimeReact.Charts.ChartType` enum, in declaration order
+ * (`Studio/Source/PrimeReact/Charts/Chart.cs`). Migrated documents keep the ordinal, so the position of
+ * each entry here is part of the stored-data contract and must never be reordered.
+ */ const legacyChartTypes = [
+    ChartType.ChartType.Bar,
+    ChartType.ChartType.Line,
+    ChartType.ChartType.Pie,
+    ChartType.ChartType.Doughnut,
+    ChartType.ChartType.PolarArea,
+    ChartType.ChartType.Radar,
+    ChartType.ChartType.Bubble,
+    ChartType.ChartType.Scatter
+];
+/**
+ * Resolves an authored chart type to the Chart.js vocabulary.
+ *
+ * Three forms are accepted, and the stored value is never rewritten:
+ * - a canonical Chart.js name from {@link ChartType} (`'polarArea'`), which new documents use;
+ * - the ordinal of the original .NET enum (`4`), which migrated documents carry;
+ * - the .NET member name in its original Pascal case (`'PolarArea'`), which a JSON serialization of that
+ *   enum produces.
+ *
+ * Anything else - an unknown or fractional ordinal, a numeric string, a differently cased name, `null` -
+ * resolves to a finding with a message, because the right chart cannot be known. An absent `type` is the
+ * one default: the original control defaulted to `Bar`.
+ */ function resolveChartType(element) {
+    const value = element.properties.type;
+    if (value === undefined) return {
+        isValid: true,
+        type: ChartType.ChartType.Bar
+    };
+    if (typeof value === 'number') {
+        const type = Number.isInteger(value) ? legacyChartTypes[value] : undefined;
+        return type === undefined ? unsupported(value) : {
+            isValid: true,
+            type
+        };
+    }
+    if (typeof value === 'string') {
+        if (Object.values(ChartType.ChartType).includes(value)) return {
+            isValid: true,
+            type: value
+        };
+        if (Object.hasOwn(ChartType.ChartType, value)) return {
+            isValid: true,
+            type: ChartType.ChartType[value]
+        };
+    }
+    return unsupported(value);
+}
+function unsupported(value) {
+    const shown = typeof value === 'string' ? `'${value}'` : JSON.stringify(value) ?? String(value);
+    return {
+        isValid: false,
+        value,
+        message: `Unsupported chart type ${shown}. Use one of ${Object.values(ChartType.ChartType).join(', ')}, or a legacy ordinal from 0 to ${legacyChartTypes.length - 1}.`
+    };
+}
+
+exports.legacyChartTypes = legacyChartTypes;
+exports.resolveChartType = resolveChartType;
+//# sourceMappingURL=resolveChartType.js.map

package/dist/cjs/chart/resolveChartType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveChartType.js","sources":["../../../chart/resolveChartType.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 { SceneElement } from '@cratis/scene.model';\nimport { ChartType } from './ChartType';\nimport { ChartTypeResolution } from './ChartTypeResolution';\n\n/**\n * The ordinals of the original .NET `PrimeReact.Charts.ChartType` enum, in declaration order\n * (`Studio/Source/PrimeReact/Charts/Chart.cs`). Migrated documents keep the ordinal, so the position of\n * each entry here is part of the stored-data contract and must never be reordered.\n */\nexport const legacyChartTypes: readonly ChartType[] = [\n    ChartType.Bar,\n    ChartType.Line,\n    ChartType.Pie,\n    ChartType.Doughnut,\n    ChartType.PolarArea,\n    ChartType.Radar,\n    ChartType.Bubble,\n    ChartType.Scatter,\n];\n\n/**\n * Resolves an authored chart type to the Chart.js vocabulary.\n *\n * Three forms are accepted, and the stored value is never rewritten:\n * - a canonical Chart.js name from {@link ChartType} (`'polarArea'`), which new documents use;\n * - the ordinal of the original .NET enum (`4`), which migrated documents carry;\n * - the .NET member name in its original Pascal case (`'PolarArea'`), which a JSON serialization of that\n *   enum produces.\n *\n * Anything else - an unknown or fractional ordinal, a numeric string, a differently cased name, `null` -\n * resolves to a finding with a message, because the right chart cannot be known. An absent `type` is the\n * one default: the original control defaulted to `Bar`.\n */\nexport function resolveChartType(element: SceneElement): ChartTypeResolution {\n    const value = element.properties.type;\n    if (value === undefined) return { isValid: true, type: ChartType.Bar };\n\n    if (typeof value === 'number') {\n        const type = Number.isInteger(value) ? legacyChartTypes[value] : undefined;\n        return type === undefined ? unsupported(value) : { isValid: true, type };\n    }\n\n    if (typeof value === 'string') {\n        if (Object.values(ChartType).includes(value as ChartType)) return { isValid: true, type: value as ChartType };\n        if (Object.hasOwn(ChartType, value)) return { isValid: true, type: ChartType[value as keyof typeof ChartType] };\n    }\n\n    return unsupported(value);\n}\n\nfunction unsupported(value: unknown): ChartTypeResolution {\n    const shown = typeof value === 'string' ? `'${value}'` : JSON.stringify(value) ?? String(value);\n    return {\n        isValid: false,\n        value,\n        message: `Unsupported chart type ${shown}. Use one of ${Object.values(ChartType).join(', ')}, or a legacy ordinal from 0 to ${legacyChartTypes.length - 1}.`,\n    };\n}\n"],"names":["legacyChartTypes","ChartType","Bar","Line","Pie","Doughnut","PolarArea","Radar","Bubble","Scatter","resolveChartType","element","value","properties","type","undefined","isValid","Number","isInteger","unsupported","Object","values","includes","hasOwn","shown","JSON","stringify","String","message","join","length"],"mappings":";;;;AAAA;AACA;AAMA;;;;UAKaA,gBAAAA,GAAyC;AAClDC,IAAAA,mBAAAA,CAAUC,GAAG;AACbD,IAAAA,mBAAAA,CAAUE,IAAI;AACdF,IAAAA,mBAAAA,CAAUG,GAAG;AACbH,IAAAA,mBAAAA,CAAUI,QAAQ;AAClBJ,IAAAA,mBAAAA,CAAUK,SAAS;AACnBL,IAAAA,mBAAAA,CAAUM,KAAK;AACfN,IAAAA,mBAAAA,CAAUO,MAAM;AAChBP,IAAAA,mBAAAA,CAAUQ;;AAGd;;;;;;;;;;;;IAaO,SAASC,gBAAAA,CAAiBC,OAAqB,EAAA;AAClD,IAAA,MAAMC,KAAAA,GAAQD,OAAAA,CAAQE,UAAU,CAACC,IAAI;IACrC,IAAIF,KAAAA,KAAUG,WAAW,OAAO;QAAEC,OAAAA,EAAS,IAAA;AAAMF,QAAAA,IAAAA,EAAMb,oBAAUC;AAAI,KAAA;IAErE,IAAI,OAAOU,UAAU,QAAA,EAAU;QAC3B,MAAME,IAAAA,GAAOG,OAAOC,SAAS,CAACN,SAASZ,gBAAgB,CAACY,MAAM,GAAGG,SAAAA;QACjE,OAAOD,IAAAA,KAASC,SAAAA,GAAYI,WAAAA,CAAYP,KAAAA,CAAAA,GAAS;YAAEI,OAAAA,EAAS,IAAA;AAAMF,YAAAA;AAAK,SAAA;AAC3E,IAAA;IAEA,IAAI,OAAOF,UAAU,QAAA,EAAU;AAC3B,QAAA,IAAIQ,OAAOC,MAAM,CAACpB,qBAAWqB,QAAQ,CAACV,QAAqB,OAAO;YAAEI,OAAAA,EAAS,IAAA;YAAMF,IAAAA,EAAMF;AAAmB,SAAA;AAC5G,QAAA,IAAIQ,MAAAA,CAAOG,MAAM,CAACtB,mBAAAA,EAAWW,QAAQ,OAAO;YAAEI,OAAAA,EAAS,IAAA;YAAMF,IAAAA,EAAMb,mBAAS,CAACW,KAAAA;AAAiC,SAAA;AAClH,IAAA;AAEA,IAAA,OAAOO,WAAAA,CAAYP,KAAAA,CAAAA;AACvB;AAEA,SAASO,YAAYP,KAAc,EAAA;AAC/B,IAAA,MAAMY,KAAAA,GAAQ,OAAOZ,KAAAA,KAAU,QAAA,GAAW,CAAC,CAAC,EAAEA,KAAAA,CAAM,CAAC,CAAC,GAAGa,IAAAA,CAAKC,SAAS,CAACd,UAAUe,MAAAA,CAAOf,KAAAA,CAAAA;IACzF,OAAO;QACHI,OAAAA,EAAS,KAAA;AACTJ,QAAAA,KAAAA;QACAgB,OAAAA,EAAS,CAAC,uBAAuB,EAAEJ,KAAAA,CAAM,aAAa,EAAEJ,MAAAA,CAAOC,MAAM,CAACpB,mBAAAA,CAAAA,CAAW4B,IAAI,CAAC,IAAA,CAAA,CAAM,gCAAgC,EAAE7B,gBAAAA,CAAiB8B,MAAM,GAAG,CAAA,CAAE,CAAC;AAC/J,KAAA;AACJ;;;"}

package/dist/cjs/chart/useChart.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var react = require('react');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Draws a Chart.js chart on a canvas and owns its lifetime.
+ *
+ * Chart.js loads only after the canvas has mounted, which keeps server rendering independent of browser
+ * globals. The chart is destroyed before it is rebuilt and when the component unmounts - Chart.js owns
+ * listeners and resize observers, so a retained instance would draw twice and leak them.
+ *
+ * A chart that cannot be drawn is reported rather than left as a blank canvas: `chart.js` not being
+ * installed (it is an optional peer dependency), a failed dynamic import and a rejected configuration all
+ * come back as the returned failure message. A rejected configuration is released from the canvas as well,
+ * so correcting it draws again on the same canvas.
+ *
+ * @param canvas The canvas to draw on. It must be rendered whenever `enabled` is true.
+ * @param configuration The Chart.js configuration. Pass a structurally stable value (see
+ * {@link useStructuralValue}); a new identity rebuilds the chart.
+ * @param enabled Whether there is something to draw.
+ * @returns The reason the chart could not be drawn, or `undefined`.
+ */ function useChart(canvas, configuration, enabled) {
+    const [failure, setFailure] = react.useState(undefined);
+    react.useEffect(()=>{
+        setFailure(undefined);
+        const target = canvas.current;
+        if (!enabled || target === null) return undefined;
+        let disposed = false;
+        let instance;
+        const create = async ()=>{
+            let chartType;
+            try {
+                chartType = (await import('chart.js/auto')).default;
+                if (disposed) return;
+                instance = new chartType(target, structuredClone(configuration));
+            } catch (error) {
+                // Chart.js registers a chart on its canvas before the constructor finishes, so a constructor
+                // that throws still leaves a registered instance behind - one `instance` never points at. Left
+                // alone it makes every later attempt fail with "Canvas is already in use" and hides the real
+                // reason, so release whatever is bound to this canvas before reporting.
+                chartType?.getChart(target)?.destroy();
+                if (!disposed) setFailure(error instanceof Error ? error.message : String(error));
+            }
+        };
+        void create();
+        return ()=>{
+            disposed = true;
+            instance?.destroy();
+            instance = undefined;
+        };
+    }, [
+        canvas,
+        configuration,
+        enabled
+    ]);
+    return failure;
+}
+
+exports.useChart = useChart;
+//# sourceMappingURL=useChart.js.map

package/dist/cjs/chart/useChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChart.js","sources":["../../../chart/useChart.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 { RefObject, useEffect, useState } from 'react';\nimport type { ChartConfiguration } from 'chart.js';\n\n/**\n * Draws a Chart.js chart on a canvas and owns its lifetime.\n *\n * Chart.js loads only after the canvas has mounted, which keeps server rendering independent of browser\n * globals. The chart is destroyed before it is rebuilt and when the component unmounts - Chart.js owns\n * listeners and resize observers, so a retained instance would draw twice and leak them.\n *\n * A chart that cannot be drawn is reported rather than left as a blank canvas: `chart.js` not being\n * installed (it is an optional peer dependency), a failed dynamic import and a rejected configuration all\n * come back as the returned failure message. A rejected configuration is released from the canvas as well,\n * so correcting it draws again on the same canvas.\n *\n * @param canvas The canvas to draw on. It must be rendered whenever `enabled` is true.\n * @param configuration The Chart.js configuration. Pass a structurally stable value (see\n * {@link useStructuralValue}); a new identity rebuilds the chart.\n * @param enabled Whether there is something to draw.\n * @returns The reason the chart could not be drawn, or `undefined`.\n */\nexport function useChart(canvas: RefObject<HTMLCanvasElement | null>, configuration: ChartConfiguration, enabled: boolean): string | undefined {\n    const [failure, setFailure] = useState<string | undefined>(undefined);\n\n    useEffect(() => {\n        setFailure(undefined);\n        const target = canvas.current;\n        if (!enabled || target === null) return undefined;\n\n        let disposed = false;\n        let instance: { destroy(): void } | undefined;\n\n        const create = async () => {\n            let chartType: typeof import('chart.js/auto').default | undefined;\n            try {\n                chartType = (await import('chart.js/auto')).default;\n                if (disposed) return;\n                instance = new chartType(target, structuredClone(configuration));\n            } catch (error) {\n                // Chart.js registers a chart on its canvas before the constructor finishes, so a constructor\n                // that throws still leaves a registered instance behind - one `instance` never points at. Left\n                // alone it makes every later attempt fail with \"Canvas is already in use\" and hides the real\n                // reason, so release whatever is bound to this canvas before reporting.\n                chartType?.getChart(target)?.destroy();\n                if (!disposed) setFailure(error instanceof Error ? error.message : String(error));\n            }\n        };\n\n        void create();\n        return () => {\n            disposed = true;\n            instance?.destroy();\n            instance = undefined;\n        };\n    }, [canvas, configuration, enabled]);\n\n    return failure;\n}\n"],"names":["useChart","canvas","configuration","enabled","failure","setFailure","useState","undefined","useEffect","target","current","disposed","instance","create","chartType","default","structuredClone","error","getChart","destroy","Error","message","String"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;;;;;;;;;;;AAiBC,IACM,SAASA,QAAAA,CAASC,MAA2C,EAAEC,aAAiC,EAAEC,OAAgB,EAAA;AACrH,IAAA,MAAM,CAACC,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAA6BC,SAAAA,CAAAA;IAE3DC,eAAAA,CAAU,IAAA;QACNH,UAAAA,CAAWE,SAAAA,CAAAA;QACX,MAAME,MAAAA,GAASR,OAAOS,OAAO;AAC7B,QAAA,IAAI,CAACP,OAAAA,IAAWM,MAAAA,KAAW,IAAA,EAAM,OAAOF,SAAAA;AAExC,QAAA,IAAII,QAAAA,GAAW,KAAA;QACf,IAAIC,QAAAA;AAEJ,QAAA,MAAMC,MAAAA,GAAS,UAAA;YACX,IAAIC,SAAAA;YACJ,IAAI;AACAA,gBAAAA,SAAAA,GAAY,CAAC,MAAM,OAAO,eAAA,CAAe,EAAGC,OAAO;AACnD,gBAAA,IAAIJ,QAAAA,EAAU;gBACdC,QAAAA,GAAW,IAAIE,SAAAA,CAAUL,MAAAA,EAAQO,eAAAA,CAAgBd,aAAAA,CAAAA,CAAAA;AACrD,YAAA,CAAA,CAAE,OAAOe,KAAAA,EAAO;;;;;AAKZH,gBAAAA,SAAAA,EAAWI,SAAST,MAAAA,CAAAA,EAASU,OAAAA,EAAAA;gBAC7B,IAAI,CAACR,UAAUN,UAAAA,CAAWY,KAAAA,YAAiBG,QAAQH,KAAAA,CAAMI,OAAO,GAAGC,MAAAA,CAAOL,KAAAA,CAAAA,CAAAA;AAC9E,YAAA;AACJ,QAAA,CAAA;QAEA,KAAKJ,MAAAA,EAAAA;QACL,OAAO,IAAA;YACHF,QAAAA,GAAW,IAAA;YACXC,QAAAA,EAAUO,OAAAA,EAAAA;YACVP,QAAAA,GAAWL,SAAAA;AACf,QAAA,CAAA;IACJ,CAAA,EAAG;AAACN,QAAAA,MAAAA;AAAQC,QAAAA,aAAAA;AAAeC,QAAAA;AAAQ,KAAA,CAAA;IAEnC,OAAOC,OAAAA;AACX;;"}

package/dist/cjs/form/MultiStateGlyph.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var scene_react = require('@cratis/scene.react');
+
+/**
+ * The box a multi-state checkbox draws, themed with the PrimeReact checkbox tokens (`--p-checkbox-*`), so
+ * it follows the active Scene theme and looks like its sibling `checkbox`. It holds the state's icon - a
+ * PrimeIcons class or a qualified icon reference - or a check mark when the state has no icon of its own.
+ * An empty state draws only its own icon, if it has one. It is decorative: the state is announced through the control's text, not through this glyph.
+ */ function MultiStateGlyph({ state, isEmpty, isInactive }) {
+    const icon = state?.icon;
+    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        "data-scene-part": "glyph",
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            boxSizing: 'border-box',
+            width: 'var(--p-checkbox-width, 1.125rem)',
+            height: 'var(--p-checkbox-height, 1.125rem)',
+            borderRadius: 'var(--p-checkbox-border-radius, 4px)',
+            border: `1px solid ${isEmpty ? 'var(--p-checkbox-border-color, currentColor)' : 'var(--p-checkbox-checked-border-color, currentColor)'}`,
+            backgroundColor: isEmpty ? 'var(--p-checkbox-background, transparent)' : 'var(--p-checkbox-checked-background, currentColor)',
+            color: glyphColor(isEmpty, isInactive),
+            fontSize: 'var(--p-checkbox-icon-size, 0.75rem)'
+        },
+        children: icon === undefined ? !isEmpty && /*#__PURE__*/ jsxRuntime.jsx(CheckMark, {}) : typeof icon === 'string' ? /*#__PURE__*/ jsxRuntime.jsx("i", {
+            className: icon
+        }) : /*#__PURE__*/ jsxRuntime.jsx(scene_react.SceneIcon, {
+            reference: icon,
+            size: "var(--p-checkbox-icon-size, 0.75rem)"
+        })
+    });
+}
+function glyphColor(isEmpty, isInactive) {
+    if (isInactive) return 'var(--p-checkbox-icon-disabled-color, currentColor)';
+    return isEmpty ? 'var(--p-checkbox-icon-color, currentColor)' : 'var(--p-checkbox-icon-checked-color, Canvas)';
+}
+function CheckMark() {
+    return /*#__PURE__*/ jsxRuntime.jsx("svg", {
+        viewBox: "0 0 12 12",
+        width: "1em",
+        height: "1em",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+            d: "M2 6.5 5 9.5 10 3"
+        })
+    });
+}
+
+exports.MultiStateGlyph = MultiStateGlyph;
+//# sourceMappingURL=MultiStateGlyph.js.map

package/dist/cjs/form/MultiStateGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStateGlyph.js","sources":["../../../form/MultiStateGlyph.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 { SceneIcon } from '@cratis/scene.react';\nimport { MultiStateOption } from './MultiStateOption';\n\nexport interface MultiStateGlyphProps {\n    /** The state being shown. */\n    state: MultiStateOption | undefined;\n\n    /** Whether the state is the empty (`null`) state, drawn as an empty box. */\n    isEmpty: boolean;\n\n    /** Whether the control is disabled or read only. */\n    isInactive: boolean;\n}\n\n/**\n * The box a multi-state checkbox draws, themed with the PrimeReact checkbox tokens (`--p-checkbox-*`), so\n * it follows the active Scene theme and looks like its sibling `checkbox`. It holds the state's icon - a\n * PrimeIcons class or a qualified icon reference - or a check mark when the state has no icon of its own.\n * An empty state draws only its own icon, if it has one. It is decorative: the state is announced through the control's text, not through this glyph.\n */\nexport function MultiStateGlyph({ state, isEmpty, isInactive }: MultiStateGlyphProps) {\n    const icon = state?.icon;\n    return (\n        <span\n            aria-hidden='true'\n            data-scene-part='glyph'\n            style={{\n                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxSizing: 'border-box',\n                width: 'var(--p-checkbox-width, 1.125rem)', height: 'var(--p-checkbox-height, 1.125rem)',\n                borderRadius: 'var(--p-checkbox-border-radius, 4px)',\n                border: `1px solid ${isEmpty ? 'var(--p-checkbox-border-color, currentColor)' : 'var(--p-checkbox-checked-border-color, currentColor)'}`,\n                backgroundColor: isEmpty ? 'var(--p-checkbox-background, transparent)' : 'var(--p-checkbox-checked-background, currentColor)',\n                color: glyphColor(isEmpty, isInactive),\n                fontSize: 'var(--p-checkbox-icon-size, 0.75rem)',\n            }}>\n            {icon === undefined ? !isEmpty && <CheckMark /> : typeof icon === 'string' ? <i className={icon} /> : <SceneIcon reference={icon} size='var(--p-checkbox-icon-size, 0.75rem)' />}\n        </span>\n    );\n}\n\nfunction glyphColor(isEmpty: boolean, isInactive: boolean): string {\n    if (isInactive) return 'var(--p-checkbox-icon-disabled-color, currentColor)';\n    return isEmpty ? 'var(--p-checkbox-icon-color, currentColor)' : 'var(--p-checkbox-icon-checked-color, Canvas)';\n}\n\nfunction CheckMark() {\n    return (\n        <svg viewBox='0 0 12 12' width='1em' height='1em' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'>\n            <path d='M2 6.5 5 9.5 10 3' />\n        </svg>\n    );\n}\n"],"names":["MultiStateGlyph","state","isEmpty","isInactive","icon","_jsx","span","aria-hidden","data-scene-part","style","display","alignItems","justifyContent","flexShrink","boxSizing","width","height","borderRadius","border","backgroundColor","color","glyphColor","fontSize","undefined","CheckMark","i","className","SceneIcon","reference","size","svg","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d"],"mappings":";;;;;AAiBA;;;;;IAMO,SAASA,eAAAA,CAAgB,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,EAAwB,EAAA;AAChF,IAAA,MAAMC,OAAOH,KAAAA,EAAOG,IAAAA;AACpB,IAAA,qBACIC,cAAA,CAACC,MAAAA,EAAAA;QACGC,aAAAA,EAAY,MAAA;QACZC,iBAAAA,EAAgB,OAAA;QAChBC,KAAAA,EAAO;YACHC,OAAAA,EAAS,aAAA;YAAeC,UAAAA,EAAY,QAAA;YAAUC,cAAAA,EAAgB,QAAA;YAAUC,UAAAA,EAAY,CAAA;YAAGC,SAAAA,EAAW,YAAA;YAClGC,KAAAA,EAAO,mCAAA;YAAqCC,MAAAA,EAAQ,oCAAA;YACpDC,YAAAA,EAAc,sCAAA;AACdC,YAAAA,MAAAA,EAAQ,CAAC,UAAU,EAAEhB,OAAAA,GAAU,iDAAiD,sDAAA,CAAA,CAAwD;AACxIiB,YAAAA,eAAAA,EAAiBjB,UAAU,2CAAA,GAA8C,oDAAA;AACzEkB,YAAAA,KAAAA,EAAOC,WAAWnB,OAAAA,EAASC,UAAAA,CAAAA;YAC3BmB,QAAAA,EAAU;AACd,SAAA;kBACClB,IAAAA,KAASmB,SAAAA,GAAY,CAACrB,OAAAA,kBAAWG,cAAA,CAACmB,iBAAe,OAAOpB,IAAAA,KAAS,yBAAWC,cAAA,CAACoB,GAAAA,EAAAA;YAAEC,SAAAA,EAAWtB;2BAAWC,cAAA,CAACsB,qBAAAA,EAAAA;YAAUC,SAAAA,EAAWxB,IAAAA;YAAMyB,IAAAA,EAAK;;;AAGnJ;AAEA,SAASR,UAAAA,CAAWnB,OAAgB,EAAEC,UAAmB,EAAA;AACrD,IAAA,IAAIA,YAAY,OAAO,qDAAA;AACvB,IAAA,OAAOD,UAAU,4CAAA,GAA+C,8CAAA;AACpE;AAEA,SAASsB,SAAAA,GAAAA;AACL,IAAA,qBACInB,cAAA,CAACyB,KAAAA,EAAAA;QAAIC,OAAAA,EAAQ,WAAA;QAAYhB,KAAAA,EAAM,KAAA;QAAMC,MAAAA,EAAO,KAAA;QAAMgB,IAAAA,EAAK,MAAA;QAAOC,MAAAA,EAAO,cAAA;QAAeC,WAAAA,EAAY,GAAA;QAAIC,aAAAA,EAAc,OAAA;QAAQC,cAAAA,EAAe,OAAA;AACrI,QAAA,QAAA,gBAAA/B,cAAA,CAACgC,MAAAA,EAAAA;YAAKC,CAAAA,EAAE;;;AAGpB;;"}

package/dist/cjs/form/PrimeMultiStateCheckbox.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_model = require('@cratis/scene.model');
+var properties = require('../properties.js');
+var MultiStateGlyph = require('./MultiStateGlyph.js');
+var multiStateOptions = require('./multiStateOptions.js');
+var multiStateStates = require('./multiStateStates.js');
+var useMultiStateSelection = require('./useMultiStateSelection.js');
+
+const visuallyHidden = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+};
+/**
+ * The `PrimeReact:multiStateCheckbox` component.
+ *
+ * PrimeReact 11 removed MultiStateCheckbox, so Scene renders its original behavior with a native button.
+ * It cycles through the authored states in order, including the optional empty (`null`) state, and keeps
+ * option values and icons exactly as the element carries them. Each click moves one step; the position is
+ * an index, so duplicated or `null` option values do not make later states unreachable.
+ *
+ * Accessibility: a state cycle is not a true/false choice, so the control does not claim `checkbox`
+ * semantics (every non-empty state would announce as "checked"). It is a button whose name is the authored
+ * `ariaLabel`, whose description is the current state, and whose state changes are announced through a
+ * polite live region. `readOnly` keeps the control focusable and unchanged; `disabled` removes it from the
+ * tab order.
+ *
+ * The control follows the document: a changed `value` or `options` restarts the cycle from the new value,
+ * so an inspector edit is reflected immediately. It does not report its own selection to behaviors -
+ * Scene's interaction handlers carry no value.
+ */ function PrimeMultiStateCheckbox({ element, interactions }) {
+    const stateId = react.useId();
+    const allowEmpty = properties.booleanProperty(element, 'empty', true);
+    const emptyLabel = properties.stringProperty(element, 'emptyLabel', 'No selection');
+    const emptyIcon = element.properties.emptyIcon;
+    const states = multiStateStates.multiStateStates(multiStateOptions.multiStateOptions(element, emptyLabel), allowEmpty, emptyLabel, typeof emptyIcon === 'string' || scene_model.isIconReference(emptyIcon) ? emptyIcon : undefined);
+    const authored = element.properties.value;
+    const { index, advance } = useMultiStateSelection.useMultiStateSelection(states, authored === undefined && allowEmpty ? null : authored);
+    const [focused, setFocused] = react.useState(false);
+    const selected = states[index];
+    const readOnly = properties.booleanProperty(element, 'readOnly', false);
+    const disabled = !element.isEnabled || properties.booleanProperty(element, 'disabled', false) || states.length === 0;
+    const ariaLabel = properties.stringProperty(element, 'ariaLabel', element.name || 'Multi-state checkbox');
+    const stateText = selected?.label ?? properties.stringProperty(element, 'placeholder', unmatchedText(states.length, authored, emptyLabel));
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                type: "button",
+                "data-scene-id": element.id,
+                "data-scene-component": "multiStateCheckbox",
+                "data-scene-state-index": index,
+                "aria-label": ariaLabel,
+                "aria-describedby": stateId,
+                "aria-disabled": readOnly ? true : undefined,
+                disabled: disabled,
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                    padding: 0,
+                    border: 0,
+                    background: 'none',
+                    font: 'inherit',
+                    color: 'inherit',
+                    cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer',
+                    opacity: disabled ? 0.6 : 1,
+                    outline: focused ? 'var(--p-focus-ring-width, 2px) var(--p-focus-ring-style, solid) var(--p-focus-ring-color, currentColor)' : 'none',
+                    outlineOffset: 'var(--p-focus-ring-offset, 2px)'
+                },
+                onFocus: (event)=>setFocused(isFocusVisible(event.currentTarget)),
+                onBlur: ()=>setFocused(false),
+                onClick: (event)=>{
+                    if (!readOnly) advance();
+                    interactions?.onClick?.(event);
+                    if (readOnly) return;
+                    interactions?.onChange?.();
+                    interactions?.onSelect?.();
+                },
+                onDoubleClick: interactions?.onDoubleClick,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(MultiStateGlyph.MultiStateGlyph, {
+                        state: selected,
+                        isEmpty: selected === undefined || selected.value === null,
+                        isInactive: disabled || readOnly
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        "aria-hidden": "true",
+                        children: stateText
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                id: stateId,
+                role: "status",
+                style: visuallyHidden,
+                children: stateText
+            })
+        ]
+    });
+}
+function unmatchedText(stateCount, authored, emptyLabel) {
+    if (stateCount === 0) return 'No states';
+    return authored === undefined ? emptyLabel : 'No matching state';
+}
+function isFocusVisible(target) {
+    try {
+        return target.matches(':focus-visible');
+    } catch  {
+        return true;
+    }
+}
+
+exports.PrimeMultiStateCheckbox = PrimeMultiStateCheckbox;
+//# sourceMappingURL=PrimeMultiStateCheckbox.js.map

package/dist/cjs/form/PrimeMultiStateCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeMultiStateCheckbox.js","sources":["../../../form/PrimeMultiStateCheckbox.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, useId, useState } from 'react';\nimport { isIconReference } from '@cratis/scene.model';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\nimport { MultiStateGlyph } from './MultiStateGlyph';\nimport { multiStateOptions } from './multiStateOptions';\nimport { multiStateStates } from './multiStateStates';\nimport { useMultiStateSelection } from './useMultiStateSelection';\n\nconst visuallyHidden: CSSProperties = {\n    position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0,\n};\n\n/**\n * The `PrimeReact:multiStateCheckbox` component.\n *\n * PrimeReact 11 removed MultiStateCheckbox, so Scene renders its original behavior with a native button.\n * It cycles through the authored states in order, including the optional empty (`null`) state, and keeps\n * option values and icons exactly as the element carries them. Each click moves one step; the position is\n * an index, so duplicated or `null` option values do not make later states unreachable.\n *\n * Accessibility: a state cycle is not a true/false choice, so the control does not claim `checkbox`\n * semantics (every non-empty state would announce as \"checked\"). It is a button whose name is the authored\n * `ariaLabel`, whose description is the current state, and whose state changes are announced through a\n * polite live region. `readOnly` keeps the control focusable and unchanged; `disabled` removes it from the\n * tab order.\n *\n * The control follows the document: a changed `value` or `options` restarts the cycle from the new value,\n * so an inspector edit is reflected immediately. It does not report its own selection to behaviors -\n * Scene's interaction handlers carry no value.\n */\nexport function PrimeMultiStateCheckbox({ element, interactions }: RegisteredComponentProps) {\n    const stateId = useId();\n    const allowEmpty = booleanProperty(element, 'empty', true);\n    const emptyLabel = stringProperty(element, 'emptyLabel', 'No selection');\n    const emptyIcon = element.properties.emptyIcon;\n    const states = multiStateStates(\n        multiStateOptions(element, emptyLabel),\n        allowEmpty,\n        emptyLabel,\n        typeof emptyIcon === 'string' || isIconReference(emptyIcon) ? emptyIcon : undefined);\n    const authored = element.properties.value;\n    const { index, advance } = useMultiStateSelection(states, authored === undefined && allowEmpty ? null : authored);\n    const [focused, setFocused] = useState(false);\n\n    const selected = states[index];\n    const readOnly = booleanProperty(element, 'readOnly', false);\n    const disabled = !element.isEnabled || booleanProperty(element, 'disabled', false) || states.length === 0;\n    const ariaLabel = stringProperty(element, 'ariaLabel', element.name || 'Multi-state checkbox');\n    const stateText = selected?.label ?? stringProperty(element, 'placeholder', unmatchedText(states.length, authored, emptyLabel));\n\n    return (\n        <>\n            <button\n                type='button'\n                data-scene-id={element.id}\n                data-scene-component='multiStateCheckbox'\n                data-scene-state-index={index}\n                aria-label={ariaLabel}\n                aria-describedby={stateId}\n                aria-disabled={readOnly ? true : undefined}\n                disabled={disabled}\n                style={{\n                    display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: 0, border: 0, background: 'none', font: 'inherit',\n                    color: 'inherit', cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1,\n                    outline: focused ? 'var(--p-focus-ring-width, 2px) var(--p-focus-ring-style, solid) var(--p-focus-ring-color, currentColor)' : 'none',\n                    outlineOffset: 'var(--p-focus-ring-offset, 2px)',\n                }}\n                onFocus={(event) => setFocused(isFocusVisible(event.currentTarget))}\n                onBlur={() => setFocused(false)}\n                onClick={(event) => {\n                    if (!readOnly) advance();\n                    interactions?.onClick?.(event);\n                    if (readOnly) return;\n                    interactions?.onChange?.();\n                    interactions?.onSelect?.();\n                }}\n                onDoubleClick={interactions?.onDoubleClick}>\n                <MultiStateGlyph state={selected} isEmpty={selected === undefined || selected.value === null} isInactive={disabled || readOnly} />\n                <span aria-hidden='true'>{stateText}</span>\n            </button>\n            <span id={stateId} role='status' style={visuallyHidden}>{stateText}</span>\n        </>\n    );\n}\n\nfunction unmatchedText(stateCount: number, authored: unknown, emptyLabel: string): string {\n    if (stateCount === 0) return 'No states';\n    return authored === undefined ? emptyLabel : 'No matching state';\n}\n\nfunction isFocusVisible(target: HTMLElement): boolean {\n    try {\n        return target.matches(':focus-visible');\n    } catch {\n        return true;\n    }\n}\n"],"names":["visuallyHidden","position","width","height","margin","padding","overflow","clip","whiteSpace","border","PrimeMultiStateCheckbox","element","interactions","stateId","useId","allowEmpty","booleanProperty","emptyLabel","stringProperty","emptyIcon","properties","states","multiStateStates","multiStateOptions","isIconReference","undefined","authored","value","index","advance","useMultiStateSelection","focused","setFocused","useState","selected","readOnly","disabled","isEnabled","length","ariaLabel","name","stateText","label","unmatchedText","_jsxs","_Fragment","button","type","data-scene-id","id","data-scene-component","data-scene-state-index","aria-label","aria-describedby","aria-disabled","style","display","alignItems","gap","background","font","color","cursor","opacity","outline","outlineOffset","onFocus","event","isFocusVisible","currentTarget","onBlur","onClick","onChange","onSelect","onDoubleClick","_jsx","MultiStateGlyph","state","isEmpty","isInactive","span","aria-hidden","role","stateCount","target","matches"],"mappings":";;;;;;;;;;;AAYA,MAAMA,cAAAA,GAAgC;IAClCC,QAAAA,EAAU,UAAA;IAAYC,KAAAA,EAAO,CAAA;IAAGC,MAAAA,EAAQ,CAAA;AAAGC,IAAAA,MAAAA,EAAQ,EAAC;IAAGC,OAAAA,EAAS,CAAA;IAAGC,QAAAA,EAAU,QAAA;IAAUC,IAAAA,EAAM,eAAA;IAAiBC,UAAAA,EAAY,QAAA;IAAUC,MAAAA,EAAQ;AAChJ,CAAA;AAEA;;;;;;;;;;;;;;;;;AAiBC,IACM,SAASC,uBAAAA,CAAwB,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;AACvF,IAAA,MAAMC,OAAAA,GAAUC,WAAAA,EAAAA;IAChB,MAAMC,UAAAA,GAAaC,0BAAAA,CAAgBL,OAAAA,EAAS,OAAA,EAAS,IAAA,CAAA;IACrD,MAAMM,UAAAA,GAAaC,yBAAAA,CAAeP,OAAAA,EAAS,YAAA,EAAc,cAAA,CAAA;AACzD,IAAA,MAAMQ,SAAAA,GAAYR,OAAAA,CAAQS,UAAU,CAACD,SAAS;AAC9C,IAAA,MAAME,MAAAA,GAASC,iCAAAA,CACXC,mCAAAA,CAAkBZ,OAAAA,EAASM,UAAAA,CAAAA,EAC3BF,UAAAA,EACAE,UAAAA,EACA,OAAOE,SAAAA,KAAc,QAAA,IAAYK,2BAAAA,CAAgBL,SAAAA,CAAAA,GAAaA,SAAAA,GAAYM,SAAAA,CAAAA;AAC9E,IAAA,MAAMC,QAAAA,GAAWf,OAAAA,CAAQS,UAAU,CAACO,KAAK;IACzC,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGC,6CAAAA,CAAuBT,MAAAA,EAAQK,QAAAA,KAAaD,SAAAA,IAAaV,UAAAA,GAAa,IAAA,GAAOW,QAAAA,CAAAA;AACxG,IAAA,MAAM,CAACK,OAAAA,EAASC,UAAAA,CAAW,GAAGC,cAAAA,CAAS,KAAA,CAAA;IAEvC,MAAMC,QAAAA,GAAWb,MAAM,CAACO,KAAAA,CAAM;IAC9B,MAAMO,QAAAA,GAAWnB,0BAAAA,CAAgBL,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA;IACtD,MAAMyB,QAAAA,GAAW,CAACzB,OAAAA,CAAQ0B,SAAS,IAAIrB,0BAAAA,CAAgBL,OAAAA,EAAS,UAAA,EAAY,KAAA,CAAA,IAAUU,MAAAA,CAAOiB,MAAM,KAAK,CAAA;AACxG,IAAA,MAAMC,YAAYrB,yBAAAA,CAAeP,OAAAA,EAAS,WAAA,EAAaA,OAAAA,CAAQ6B,IAAI,IAAI,sBAAA,CAAA;IACvE,MAAMC,SAAAA,GAAYP,QAAAA,EAAUQ,KAAAA,IAASxB,yBAAAA,CAAeP,OAAAA,EAAS,eAAegC,aAAAA,CAActB,MAAAA,CAAOiB,MAAM,EAAEZ,QAAAA,EAAUT,UAAAA,CAAAA,CAAAA;IAEnH,qBACI2B,eAAA,CAAAC,mBAAA,EAAA;;0BACID,eAAA,CAACE,QAAAA,EAAAA;gBACGC,IAAAA,EAAK,QAAA;AACLC,gBAAAA,eAAAA,EAAerC,QAAQsC,EAAE;gBACzBC,sBAAAA,EAAqB,oBAAA;gBACrBC,wBAAAA,EAAwBvB,KAAAA;gBACxBwB,YAAAA,EAAYb,SAAAA;gBACZc,kBAAAA,EAAkBxC,OAAAA;AAClByC,gBAAAA,eAAAA,EAAenB,WAAW,IAAA,GAAOV,SAAAA;gBACjCW,QAAAA,EAAUA,QAAAA;gBACVmB,KAAAA,EAAO;oBACHC,OAAAA,EAAS,aAAA;oBAAeC,UAAAA,EAAY,QAAA;oBAAUC,GAAAA,EAAK,QAAA;oBAAUrD,OAAAA,EAAS,CAAA;oBAAGI,MAAAA,EAAQ,CAAA;oBAAGkD,UAAAA,EAAY,MAAA;oBAAQC,IAAAA,EAAM,SAAA;oBAC9GC,KAAAA,EAAO,SAAA;oBAAWC,MAAAA,EAAQ1B,QAAAA,GAAW,aAAA,GAAgBD,QAAAA,GAAW,SAAA,GAAY,SAAA;AAAW4B,oBAAAA,OAAAA,EAAS3B,WAAW,GAAA,GAAM,CAAA;AACjH4B,oBAAAA,OAAAA,EAASjC,UAAU,yGAAA,GAA4G,MAAA;oBAC/HkC,aAAAA,EAAe;AACnB,iBAAA;AACAC,gBAAAA,OAAAA,EAAS,CAACC,KAAAA,GAAUnC,UAAAA,CAAWoC,cAAAA,CAAeD,MAAME,aAAa,CAAA,CAAA;AACjEC,gBAAAA,MAAAA,EAAQ,IAAMtC,UAAAA,CAAW,KAAA,CAAA;AACzBuC,gBAAAA,OAAAA,EAAS,CAACJ,KAAAA,GAAAA;AACN,oBAAA,IAAI,CAAChC,QAAAA,EAAUN,OAAAA,EAAAA;AACfjB,oBAAAA,YAAAA,EAAc2D,OAAAA,GAAUJ,KAAAA,CAAAA;AACxB,oBAAA,IAAIhC,QAAAA,EAAU;oBACdvB,YAAAA,EAAc4D,QAAAA,IAAAA;oBACd5D,YAAAA,EAAc6D,QAAAA,IAAAA;AAClB,gBAAA,CAAA;AACAC,gBAAAA,aAAAA,EAAe9D,YAAAA,EAAc8D,aAAAA;;kCAC7BC,cAAA,CAACC,+BAAAA,EAAAA;wBAAgBC,KAAAA,EAAO3C,QAAAA;AAAU4C,wBAAAA,OAAAA,EAAS5C,QAAAA,KAAaT,SAAAA,IAAaS,QAAAA,CAASP,KAAK,KAAK,IAAA;AAAMoD,wBAAAA,UAAAA,EAAY3C,QAAAA,IAAYD;;kCACtHwC,cAAA,CAACK,MAAAA,EAAAA;wBAAKC,aAAAA,EAAY,MAAA;AAAQxC,wBAAAA,QAAAA,EAAAA;;;;0BAE9BkC,cAAA,CAACK,MAAAA,EAAAA;gBAAK/B,EAAAA,EAAIpC,OAAAA;gBAASqE,IAAAA,EAAK,QAAA;gBAAS3B,KAAAA,EAAOvD,cAAAA;AAAiByC,gBAAAA,QAAAA,EAAAA;;;;AAGrE;AAEA,SAASE,aAAAA,CAAcwC,UAAkB,EAAEzD,QAAiB,EAAET,UAAkB,EAAA;IAC5E,IAAIkE,UAAAA,KAAe,GAAG,OAAO,WAAA;IAC7B,OAAOzD,QAAAA,KAAaD,YAAYR,UAAAA,GAAa,mBAAA;AACjD;AAEA,SAASmD,eAAegB,MAAmB,EAAA;IACvC,IAAI;QACA,OAAOA,MAAAA,CAAOC,OAAO,CAAC,gBAAA,CAAA;AAC1B,IAAA,CAAA,CAAE,OAAM;QACJ,OAAO,IAAA;AACX,IAAA;AACJ;;"}

package/dist/cjs/form/multiStateOptions.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var properties = require('../properties.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Reads multi-state options without reshaping their values, dropping any of them, or changing their order.
+ *
+ * This follows the original PrimeReact control. An option that is a record gives its value through
+ * `optionValue` (default, and when that field is absent: its `value` field, and the whole option when it has none) and its label through
+ * `optionLabel` (default: its `label` field). Any other option - a string, number, boolean, `null` or an
+ * array - is its own value. A label that is not text is shown as its JSON, so a numeric or boolean label,
+ * or an option with no label at all, still produces a state the user can reach. A `null` value with no
+ * label of its own is labeled with `emptyLabel`.
+ *
+ * A state's icon is, in order: the option's own `icon`, then the entry of the element's `icons` that is
+ * aligned with the option (an array) or keyed by its value (an object). Either may be a PrimeIcons class
+ * name, kept for legacy documents, or a qualified {@link IconReference}.
+ */ function multiStateOptions(element, emptyLabel) {
+    const labelPath = properties.stringProperty(element, 'optionLabel');
+    const valuePath = properties.stringProperty(element, 'optionValue');
+    const icons = element.properties.icons;
+    return properties.arrayProperty(element, 'options').map((option, index)=>{
+        const record = isRecord(option) ? option : undefined;
+        const value = record === undefined ? option : valueOf(record, valuePath);
+        const label = record === undefined ? undefined : resolvePath(record, labelPath ?? 'label');
+        const icon = toIcon(record?.icon) ?? iconAt(icons, value, index);
+        return {
+            label: labelText(label, value, emptyLabel),
+            value,
+            ...icon === undefined ? {} : {
+                icon
+            }
+        };
+    });
+}
+function valueOf(record, valuePath) {
+    const authored = valuePath === undefined ? undefined : resolvePath(record, valuePath);
+    if (authored !== undefined) return authored;
+    return record.value !== undefined ? record.value : record;
+}
+function resolvePath(record, path) {
+    if (Object.hasOwn(record, path)) return record[path];
+    let current = record;
+    for (const segment of path.split('.')){
+        if (!isRecord(current) || !Object.hasOwn(current, segment)) return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+function labelText(label, value, emptyLabel) {
+    if (typeof label === 'string' && label.length > 0) return label;
+    if (label !== undefined && label !== null && label !== '') return display(label);
+    return value === null ? emptyLabel : display(value);
+}
+function display(value) {
+    const text = typeof value === 'string' ? value : JSON.stringify(value) ?? String(value);
+    return text === '' ? '""' : text;
+}
+function toIcon(candidate) {
+    if (typeof candidate === 'string' && candidate.length > 0) return candidate;
+    return scene_model.isIconReference(candidate) ? candidate : undefined;
+}
+function iconAt(icons, value, index) {
+    if (Array.isArray(icons)) return toIcon(icons[index]);
+    if (!isRecord(icons)) return undefined;
+    const isKey = value === null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+    return isKey ? toIcon(icons[String(value)]) : undefined;
+}
+function isRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+exports.multiStateOptions = multiStateOptions;
+//# sourceMappingURL=multiStateOptions.js.map

package/dist/cjs/form/multiStateOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiStateOptions.js","sources":["../../../form/multiStateOptions.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 { SceneElement, isIconReference } from '@cratis/scene.model';\nimport { arrayProperty, stringProperty } from '../properties';\nimport { MultiStateOption } from './MultiStateOption';\n\n/**\n * Reads multi-state options without reshaping their values, dropping any of them, or changing their order.\n *\n * This follows the original PrimeReact control. An option that is a record gives its value through\n * `optionValue` (default, and when that field is absent: its `value` field, and the whole option when it has none) and its label through\n * `optionLabel` (default: its `label` field). Any other option - a string, number, boolean, `null` or an\n * array - is its own value. A label that is not text is shown as its JSON, so a numeric or boolean label,\n * or an option with no label at all, still produces a state the user can reach. A `null` value with no\n * label of its own is labeled with `emptyLabel`.\n *\n * A state's icon is, in order: the option's own `icon`, then the entry of the element's `icons` that is\n * aligned with the option (an array) or keyed by its value (an object). Either may be a PrimeIcons class\n * name, kept for legacy documents, or a qualified {@link IconReference}.\n */\nexport function multiStateOptions(element: SceneElement, emptyLabel: string): MultiStateOption[] {\n    const labelPath = stringProperty(element, 'optionLabel');\n    const valuePath = stringProperty(element, 'optionValue');\n    const icons = element.properties.icons;\n\n    return arrayProperty(element, 'options').map((option, index) => {\n        const record = isRecord(option) ? option : undefined;\n        const value = record === undefined ? option : valueOf(record, valuePath);\n        const label = record === undefined ? undefined : resolvePath(record, labelPath ?? 'label');\n        const icon = toIcon(record?.icon) ?? iconAt(icons, value, index);\n        return { label: labelText(label, value, emptyLabel), value, ...(icon === undefined ? {} : { icon }) };\n    });\n}\n\nfunction valueOf(record: Record<string, unknown>, valuePath: string | undefined): unknown {\n    const authored = valuePath === undefined ? undefined : resolvePath(record, valuePath);\n    if (authored !== undefined) return authored;\n    return record.value !== undefined ? record.value : record;\n}\n\nfunction resolvePath(record: Record<string, unknown>, path: string): unknown {\n    if (Object.hasOwn(record, path)) return record[path];\n    let current: unknown = record;\n    for (const segment of path.split('.')) {\n        if (!isRecord(current) || !Object.hasOwn(current, segment)) return undefined;\n        current = current[segment];\n    }\n    return current;\n}\n\nfunction labelText(label: unknown, value: unknown, emptyLabel: string): string {\n    if (typeof label === 'string' && label.length > 0) return label;\n    if (label !== undefined && label !== null && label !== '') return display(label);\n    return value === null ? emptyLabel : display(value);\n}\n\nfunction display(value: unknown): string {\n    const text = typeof value === 'string' ? value : JSON.stringify(value) ?? String(value);\n    return text === '' ? '\"\"' : text;\n}\n\nfunction toIcon(candidate: unknown): MultiStateOption['icon'] {\n    if (typeof candidate === 'string' && candidate.length > 0) return candidate;\n    return isIconReference(candidate) ? candidate : undefined;\n}\n\nfunction iconAt(icons: unknown, value: unknown, index: number): MultiStateOption['icon'] {\n    if (Array.isArray(icons)) return toIcon(icons[index]);\n    if (!isRecord(icons)) return undefined;\n\n    const isKey = value === null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';\n    return isKey ? toIcon(icons[String(value)]) : undefined;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n    return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n"],"names":["multiStateOptions","element","emptyLabel","labelPath","stringProperty","valuePath","icons","properties","arrayProperty","map","option","index","record","isRecord","undefined","value","valueOf","label","resolvePath","icon","toIcon","iconAt","labelText","authored","path","Object","hasOwn","current","segment","split","length","display","text","JSON","stringify","String","candidate","isIconReference","Array","isArray","isKey"],"mappings":"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"}

package/dist/cjs/form/multiStateStates.js

@@ -0,0 +1,32 @@
+'use strict';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Builds the ordered states a multi-state checkbox cycles through.
+ *
+ * With the empty state allowed, a state whose value is `null` comes first - unless an authored option
+ * already has the value `null`, in which case that option *is* the empty state and keeps its authored
+ * position, label and icon. Adding a second `null` state would leave two states with one value, and a
+ * control that finds its place by value could then never move past the first of them.
+ *
+ * @param options The authored options, in order.
+ * @param allowEmpty Whether a `null` state is available.
+ * @param emptyLabel The label of the synthesized empty state.
+ * @param emptyIcon The icon of the synthesized empty state.
+ */ function multiStateStates(options, allowEmpty, emptyLabel, emptyIcon) {
+    if (!allowEmpty || options.some((option)=>option.value === null)) return options;
+    return [
+        {
+            label: emptyLabel,
+            value: null,
+            ...emptyIcon === undefined ? {} : {
+                icon: emptyIcon
+            }
+        },
+        ...options
+    ];
+}
+
+exports.multiStateStates = multiStateStates;
+//# sourceMappingURL=multiStateStates.js.map

package/dist/cjs/form/multiStateStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiStateStates.js","sources":["../../../form/multiStateStates.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 { IconReference } from '@cratis/scene.model';\nimport { MultiStateOption } from './MultiStateOption';\n\n/**\n * Builds the ordered states a multi-state checkbox cycles through.\n *\n * With the empty state allowed, a state whose value is `null` comes first - unless an authored option\n * already has the value `null`, in which case that option *is* the empty state and keeps its authored\n * position, label and icon. Adding a second `null` state would leave two states with one value, and a\n * control that finds its place by value could then never move past the first of them.\n *\n * @param options The authored options, in order.\n * @param allowEmpty Whether a `null` state is available.\n * @param emptyLabel The label of the synthesized empty state.\n * @param emptyIcon The icon of the synthesized empty state.\n */\nexport function multiStateStates(options: MultiStateOption[], allowEmpty: boolean, emptyLabel: string, emptyIcon: string | IconReference | undefined): MultiStateOption[] {\n    if (!allowEmpty || options.some(option => option.value === null)) return options;\n    return [{ label: emptyLabel, value: null, ...(emptyIcon === undefined ? {} : { icon: emptyIcon }) }, ...options];\n}\n"],"names":["multiStateStates","options","allowEmpty","emptyLabel","emptyIcon","some","option","value","label","undefined","icon"],"mappings":";;AAAA;AACA;AAKA;;;;;;;;;;;;IAaO,SAASA,gBAAAA,CAAiBC,OAA2B,EAAEC,UAAmB,EAAEC,UAAkB,EAAEC,SAA6C,EAAA;IAChJ,IAAI,CAACF,UAAAA,IAAcD,OAAAA,CAAQI,IAAI,CAACC,CAAAA,MAAAA,GAAUA,MAAAA,CAAOC,KAAK,KAAK,IAAA,CAAA,EAAO,OAAON,OAAAA;IACzE,OAAO;AAAC,QAAA;YAAEO,KAAAA,EAAOL,UAAAA;YAAYI,KAAAA,EAAO,IAAA;YAAM,GAAIH,SAAAA,KAAcK,SAAAA,GAAY,EAAC,GAAI;gBAAEC,IAAAA,EAAMN;;AAAa,SAAA;AAAMH,QAAAA,GAAAA;AAAQ,KAAA;AACpH;;"}

package/dist/cjs/form/useMultiStateSelection.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var react = require('react');
+var structurallyEqual = require('../structurallyEqual.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The state a multi-state checkbox is in, as an index into its states.
+ *
+ * The position is tracked by index, not recovered by looking the current value up: several states can
+ * share a value (a duplicated option), and a lookup by value always finds the first of them, which would
+ * make every later state unreachable. The index follows the cycle; the value is only used to find the
+ * starting position.
+ *
+ * The control is driven by the document as well as by the user. When the authored `value` or the states
+ * change in content - an edit in the inspector, a hydrated document - the selection starts again from the
+ * new value. A document clone with equal content changes nothing, so the user's position survives it.
+ *
+ * @param states The states, in cycle order.
+ * @param value The authored current value.
+ * @returns The selected index (`-1` when the value matches no state) and a function that moves to the next.
+ */ function useMultiStateSelection(states, value) {
+    const values = states.map((state)=>state.value);
+    const start = ()=>({
+            source: value,
+            values,
+            index: values.findIndex((candidate)=>structurallyEqual.structurallyEqual(candidate, value))
+        });
+    const [selection, setSelection] = react.useState(start);
+    let current = selection;
+    if (!structurallyEqual.structurallyEqual(selection.source, value) || !structurallyEqual.structurallyEqual(selection.values, values)) {
+        current = start();
+        setSelection(current);
+    }
+    const advance = ()=>{
+        const index = states.length === 0 ? -1 : (current.index + 1) % states.length;
+        setSelection({
+            ...current,
+            index
+        });
+        return index;
+    };
+    return {
+        index: current.index,
+        advance
+    };
+}
+
+exports.useMultiStateSelection = useMultiStateSelection;
+//# sourceMappingURL=useMultiStateSelection.js.map

package/dist/cjs/form/useMultiStateSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiStateSelection.js","sources":["../../../form/useMultiStateSelection.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 { useState } from 'react';\nimport { structurallyEqual } from '../structurallyEqual';\nimport { MultiStateOption } from './MultiStateOption';\n\ninterface Selection {\n    source: unknown;\n    values: unknown[];\n    index: number;\n}\n\n/**\n * The state a multi-state checkbox is in, as an index into its states.\n *\n * The position is tracked by index, not recovered by looking the current value up: several states can\n * share a value (a duplicated option), and a lookup by value always finds the first of them, which would\n * make every later state unreachable. The index follows the cycle; the value is only used to find the\n * starting position.\n *\n * The control is driven by the document as well as by the user. When the authored `value` or the states\n * change in content - an edit in the inspector, a hydrated document - the selection starts again from the\n * new value. A document clone with equal content changes nothing, so the user's position survives it.\n *\n * @param states The states, in cycle order.\n * @param value The authored current value.\n * @returns The selected index (`-1` when the value matches no state) and a function that moves to the next.\n */\nexport function useMultiStateSelection(states: MultiStateOption[], value: unknown): { index: number; advance(): number } {\n    const values = states.map(state => state.value);\n    const start = (): Selection => ({ source: value, values, index: values.findIndex(candidate => structurallyEqual(candidate, value)) });\n    const [selection, setSelection] = useState<Selection>(start);\n\n    let current = selection;\n    if (!structurallyEqual(selection.source, value) || !structurallyEqual(selection.values, values)) {\n        current = start();\n        setSelection(current);\n    }\n\n    const advance = () => {\n        const index = states.length === 0 ? -1 : (current.index + 1) % states.length;\n        setSelection({ ...current, index });\n        return index;\n    };\n\n    return { index: current.index, advance };\n}\n"],"names":["useMultiStateSelection","states","value","values","map","state","start","source","index","findIndex","candidate","structurallyEqual","selection","setSelection","useState","current","advance","length"],"mappings":";;;;;AAAA;AACA;AAYA;;;;;;;;;;;;;;;AAeC,IACM,SAASA,sBAAAA,CAAuBC,MAA0B,EAAEC,KAAc,EAAA;AAC7E,IAAA,MAAMC,SAASF,MAAAA,CAAOG,GAAG,CAACC,CAAAA,KAAAA,GAASA,MAAMH,KAAK,CAAA;IAC9C,MAAMI,KAAAA,GAAQ,KAAkB;YAAEC,MAAAA,EAAQL,KAAAA;AAAOC,YAAAA,MAAAA;AAAQK,YAAAA,KAAAA,EAAOL,OAAOM,SAAS,CAACC,CAAAA,SAAAA,GAAaC,oCAAkBD,SAAAA,EAAWR,KAAAA,CAAAA;SAAQ,CAAA;AACnI,IAAA,MAAM,CAACU,SAAAA,EAAWC,YAAAA,CAAa,GAAGC,cAAAA,CAAoBR,KAAAA,CAAAA;AAEtD,IAAA,IAAIS,OAAAA,GAAUH,SAAAA;IACd,IAAI,CAACD,mCAAAA,CAAkBC,SAAAA,CAAUL,MAAM,EAAEL,KAAAA,CAAAA,IAAU,CAACS,mCAAAA,CAAkBC,SAAAA,CAAUT,MAAM,EAAEA,MAAAA,CAAAA,EAAS;QAC7FY,OAAAA,GAAUT,KAAAA,EAAAA;QACVO,YAAAA,CAAaE,OAAAA,CAAAA;AACjB,IAAA;AAEA,IAAA,MAAMC,OAAAA,GAAU,IAAA;AACZ,QAAA,MAAMR,KAAAA,GAAQP,MAAAA,CAAOgB,MAAM,KAAK,IAAI,EAAC,GAAI,CAACF,QAAQP,KAAK,GAAG,CAAA,IAAKP,OAAOgB,MAAM;QAC5EJ,YAAAA,CAAa;AAAE,YAAA,GAAGE,OAAO;AAAEP,YAAAA;AAAM,SAAA,CAAA;QACjC,OAAOA,KAAAA;AACX,IAAA,CAAA;IAEA,OAAO;AAAEA,QAAAA,KAAAA,EAAOO,QAAQP,KAAK;AAAEQ,QAAAA;AAAQ,KAAA;AAC3C;;"}