@cratis/scene.primereact 0.1.0

package/dist/cjs/screen/PrimeField.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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.
+/**
+ * The `PrimeReact:field` component - one of Screenplay's screen directives: a labeled value.
+ *
+ * The label is bound to the value with `aria-labelledby` rather than left as two adjacent pieces of text,
+ * so the pair is announced as one thing. When the `content` slot carries an editor, that editor is shown
+ * instead of the static value - which is what lets the same directive serve a detail view and a form.
+ */ function PrimeField({ element, slots }) {
+    const labelId = `${element.id}-label`;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        "data-scene-id": element.id,
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                id: labelId,
+                className: "text-sm",
+                style: {
+                    color: 'var(--scene-text-muted-color)'
+                },
+                children: properties.stringProperty(element, 'label', '')
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                "aria-labelledby": labelId,
+                style: {
+                    color: 'var(--scene-text-color)'
+                },
+                children: slots.content?.length ? slots.content : properties.stringProperty(element, 'value', '')
+            })
+        ]
+    });
+}
+
+exports.PrimeField = PrimeField;
+//# sourceMappingURL=PrimeField.js.map

package/dist/cjs/screen/PrimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeField.js","sources":["../../../screen/PrimeField.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:field` component - one of Screenplay's screen directives: a labeled value.\n *\n * The label is bound to the value with `aria-labelledby` rather than left as two adjacent pieces of text,\n * so the pair is announced as one thing. When the `content` slot carries an editor, that editor is shown\n * instead of the static value - which is what lets the same directive serve a detail view and a form.\n */\nexport function PrimeField({ element, slots }: RegisteredComponentProps) {\n    const labelId = `${element.id}-label`;\n    return (\n        <div data-scene-id={element.id} className='flex flex-col gap-1'>\n            <span id={labelId} className='text-sm' style={{ color: 'var(--scene-text-muted-color)' }}>\n                {stringProperty(element, 'label', '')}\n            </span>\n            <div aria-labelledby={labelId} style={{ color: 'var(--scene-text-color)' }}>\n                {slots.content?.length ? slots.content : stringProperty(element, 'value', '')}\n            </div>\n        </div>\n    );\n}\n"],"names":["PrimeField","element","slots","labelId","id","_jsxs","div","data-scene-id","className","_jsx","span","style","color","stringProperty","aria-labelledby","content","length"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;AAMC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACnE,IAAA,MAAMC,UAAU,CAAA,EAAGF,OAAAA,CAAQG,EAAE,CAAC,MAAM,CAAC;AACrC,IAAA,qBACIC,eAAA,CAACC,KAAAA,EAAAA;AAAIC,QAAAA,eAAAA,EAAeN,QAAQG,EAAE;QAAEI,SAAAA,EAAU,qBAAA;;0BACtCC,cAAA,CAACC,MAAAA,EAAAA;gBAAKN,EAAAA,EAAID,OAAAA;gBAASK,SAAAA,EAAU,SAAA;gBAAUG,KAAAA,EAAO;oBAAEC,KAAAA,EAAO;AAAgC,iBAAA;AAClFC,gBAAAA,QAAAA,EAAAA,yBAAAA,CAAeZ,SAAS,OAAA,EAAS,EAAA;;0BAEtCQ,cAAA,CAACH,KAAAA,EAAAA;gBAAIQ,iBAAAA,EAAiBX,OAAAA;gBAASQ,KAAAA,EAAO;oBAAEC,KAAAA,EAAO;AAA0B,iBAAA;0BACpEV,KAAAA,CAAMa,OAAO,EAAEC,MAAAA,GAASd,KAAAA,CAAMa,OAAO,GAAGF,yBAAAA,CAAeZ,SAAS,OAAA,EAAS,EAAA;;;;AAI1F;;;;"}

package/dist/cjs/screen/PrimeSection.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var divider = require('primereact/divider');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:section` component - one of Screenplay's screen directives: a titled grouping.
+ *
+ * A real `<section>` with a heading, not a styled `div`: the grouping is the point of the directive, and
+ * only the semantic element actually creates one for assistive technology. The rule under the heading is
+ * PrimeReact's `Divider`, so the separation is themed with everything else rather than hard-coded.
+ */ function PrimeSection({ element, slots }) {
+    const title = properties.stringProperty(element, 'title');
+    return /*#__PURE__*/ jsxRuntime.jsxs("section", {
+        "data-scene-id": element.id,
+        className: "flex flex-col",
+        children: [
+            title !== undefined && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("h2", {
+                        className: "text-lg font-semibold",
+                        style: {
+                            color: 'var(--scene-text-color)'
+                        },
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(divider.Divider, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex flex-col gap-3",
+                children: slots.content
+            })
+        ]
+    });
+}
+
+exports.PrimeSection = PrimeSection;
+//# sourceMappingURL=PrimeSection.js.map

package/dist/cjs/screen/PrimeSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeSection.js","sources":["../../../screen/PrimeSection.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 { Divider } from 'primereact/divider';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:section` component - one of Screenplay's screen directives: a titled grouping.\n *\n * A real `<section>` with a heading, not a styled `div`: the grouping is the point of the directive, and\n * only the semantic element actually creates one for assistive technology. The rule under the heading is\n * PrimeReact's `Divider`, so the separation is themed with everything else rather than hard-coded.\n */\nexport function PrimeSection({ element, slots }: RegisteredComponentProps) {\n    const title = stringProperty(element, 'title');\n    return (\n        <section data-scene-id={element.id} className='flex flex-col'>\n            {title !== undefined && (\n                <>\n                    <h2 className='text-lg font-semibold' style={{ color: 'var(--scene-text-color)' }}>\n                        {title}\n                    </h2>\n                    <Divider />\n                </>\n            )}\n            <div className='flex flex-col gap-3'>{slots.content}</div>\n        </section>\n    );\n}\n"],"names":["PrimeSection","element","slots","title","stringProperty","_jsxs","section","data-scene-id","id","className","undefined","_Fragment","_jsx","h2","style","color","Divider","div","content"],"mappings":";;;;;;AAOA;;;;;;AAMC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACrE,MAAMC,KAAAA,GAAQC,0BAAeH,OAAAA,EAAS,OAAA,CAAA;AACtC,IAAA,qBACII,eAAA,CAACC,SAAAA,EAAAA;AAAQC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;QAAEC,SAAAA,EAAU,eAAA;;AACzCN,YAAAA,KAAAA,KAAUO,SAAAA,kBACPL,eAAA,CAAAM,mBAAA,EAAA;;kCACIC,cAAA,CAACC,IAAAA,EAAAA;wBAAGJ,SAAAA,EAAU,uBAAA;wBAAwBK,KAAAA,EAAO;4BAAEC,KAAAA,EAAO;AAA0B,yBAAA;AAC3EZ,wBAAAA,QAAAA,EAAAA;;kCAELS,cAAA,CAACI,eAAAA,EAAAA,EAAAA;;;0BAGTJ,cAAA,CAACK,KAAAA,EAAAA;gBAAIR,SAAAA,EAAU,qBAAA;AAAuBP,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMgB;;;;AAGxD;;;;"}

package/dist/cjs/screen/PrimeSummary.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var card = require('primereact/card');
+var properties = require('../properties.js');
+
+/**
+ * The `PrimeReact:summary` component - one of Screenplay's screen directives: the headline facts about
+ * one thing.
+ *
+ * Rendered as a description list inside a card. A description list is the correct element for
+ * label/value pairs and gets the pairing across to a screen reader for free, which a grid of `div`s does
+ * not.
+ */ function PrimeSummary({ element, slots }) {
+    const items = properties.recordArrayProperty(element, 'items');
+    return /*#__PURE__*/ jsxRuntime.jsxs(card.Card, {
+        "data-scene-id": element.id,
+        title: properties.stringProperty(element, 'title'),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("dl", {
+                className: "grid grid-cols-2 gap-2",
+                children: items.map((item, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("dt", {
+                                className: "text-sm",
+                                style: {
+                                    color: 'var(--scene-text-muted-color)'
+                                },
+                                children: String(item.label ?? '')
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("dd", {
+                                style: {
+                                    color: 'var(--scene-text-color)'
+                                },
+                                children: String(item.value ?? '')
+                            })
+                        ]
+                    }, index))
+            }),
+            slots.content
+        ]
+    });
+}
+
+exports.PrimeSummary = PrimeSummary;
+//# sourceMappingURL=PrimeSummary.js.map

package/dist/cjs/screen/PrimeSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeSummary.js","sources":["../../../screen/PrimeSummary.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 { Card } from 'primereact/card';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { recordArrayProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:summary` component - one of Screenplay's screen directives: the headline facts about\n * one thing.\n *\n * Rendered as a description list inside a card. A description list is the correct element for\n * label/value pairs and gets the pairing across to a screen reader for free, which a grid of `div`s does\n * not.\n */\nexport function PrimeSummary({ element, slots }: RegisteredComponentProps) {\n    const items = recordArrayProperty(element, 'items');\n    return (\n        <Card data-scene-id={element.id} title={stringProperty(element, 'title')}>\n            <dl className='grid grid-cols-2 gap-2'>\n                {items.map((item, index) => (\n                    <div key={index} className='flex flex-col'>\n                        <dt className='text-sm' style={{ color: 'var(--scene-text-muted-color)' }}>\n                            {String(item.label ?? '')}\n                        </dt>\n                        <dd style={{ color: 'var(--scene-text-color)' }}>{String(item.value ?? '')}</dd>\n                    </div>\n                ))}\n            </dl>\n            {slots.content}\n        </Card>\n    );\n}\n"],"names":["PrimeSummary","element","slots","items","recordArrayProperty","_jsxs","Card","data-scene-id","id","title","stringProperty","_jsx","dl","className","map","item","index","div","dt","style","color","String","label","dd","value","content"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACrE,MAAMC,KAAAA,GAAQC,+BAAoBH,OAAAA,EAAS,OAAA,CAAA;AAC3C,IAAA,qBACII,eAAA,CAACC,SAAAA,EAAAA;AAAKC,QAAAA,eAAAA,EAAeN,QAAQO,EAAE;AAAEC,QAAAA,KAAAA,EAAOC,0BAAeT,OAAAA,EAAS,OAAA,CAAA;;0BAC5DU,cAAA,CAACC,IAAAA,EAAAA;gBAAGC,SAAAA,EAAU,wBAAA;AACTV,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMW,GAAG,CAAC,CAACC,IAAAA,EAAMC,sBACdX,eAAA,CAACY,KAAAA,EAAAA;wBAAgBJ,SAAAA,EAAU,eAAA;;0CACvBF,cAAA,CAACO,IAAAA,EAAAA;gCAAGL,SAAAA,EAAU,SAAA;gCAAUM,KAAAA,EAAO;oCAAEC,KAAAA,EAAO;AAAgC,iCAAA;0CACnEC,MAAAA,CAAON,IAAAA,CAAKO,KAAK,IAAI,EAAA;;0CAE1BX,cAAA,CAACY,IAAAA,EAAAA;gCAAGJ,KAAAA,EAAO;oCAAEC,KAAAA,EAAO;AAA0B,iCAAA;0CAAIC,MAAAA,CAAON,IAAAA,CAAKS,KAAK,IAAI,EAAA;;;AAJjER,qBAAAA,EAAAA,KAAAA,CAAAA;;AAQjBd,YAAAA,KAAAA,CAAMuB;;;AAGnB;;;;"}

package/dist/cjs/screen/PrimeText.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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.
+/**
+ * The `PrimeReact:text` component - a run of prose.
+ *
+ * PrimeReact has no text primitive, so this one is written directly rather than wrapped. It is still
+ * worth shipping: it claims the bare name `core` also declares, and unlike core's unstyled span it picks
+ * up the active theme's type color and muting through the Scene token bridge. That is the smallest
+ * possible demonstration of why override priority exists - the same screen, the same name, better output
+ * once a component library is in the profile.
+ */ function PrimeText({ element, slots }) {
+    const muted = properties.booleanProperty(element, 'muted', false);
+    const strong = properties.booleanProperty(element, 'strong', false);
+    return /*#__PURE__*/ jsxRuntime.jsxs("span", {
+        "data-scene-id": element.id,
+        className: `${muted ? 'opacity-75' : ''} ${strong ? 'font-semibold' : ''}`.trim(),
+        style: {
+            color: muted ? 'var(--scene-text-muted-color)' : 'var(--scene-text-color)'
+        },
+        children: [
+            properties.stringProperty(element, 'text', ''),
+            slots.content
+        ]
+    });
+}
+
+exports.PrimeText = PrimeText;
+//# sourceMappingURL=PrimeText.js.map

package/dist/cjs/screen/PrimeText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeText.js","sources":["../../../screen/PrimeText.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 { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:text` component - a run of prose.\n *\n * PrimeReact has no text primitive, so this one is written directly rather than wrapped. It is still\n * worth shipping: it claims the bare name `core` also declares, and unlike core's unstyled span it picks\n * up the active theme's type color and muting through the Scene token bridge. That is the smallest\n * possible demonstration of why override priority exists - the same screen, the same name, better output\n * once a component library is in the profile.\n */\nexport function PrimeText({ element, slots }: RegisteredComponentProps) {\n    const muted = booleanProperty(element, 'muted', false);\n    const strong = booleanProperty(element, 'strong', false);\n    return (\n        <span\n            data-scene-id={element.id}\n            className={`${muted ? 'opacity-75' : ''} ${strong ? 'font-semibold' : ''}`.trim()}\n            style={{ color: muted ? 'var(--scene-text-muted-color)' : 'var(--scene-text-color)' }}>\n            {stringProperty(element, 'text', '')}\n            {slots.content}\n        </span>\n    );\n}\n"],"names":["PrimeText","element","slots","muted","booleanProperty","strong","_jsxs","span","data-scene-id","id","className","trim","style","color","stringProperty","content"],"mappings":";;;;;AAAA;AACA;AAKA;;;;;;;;AAQC,IACM,SAASA,SAAAA,CAAU,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,0BAAAA,CAAgBH,OAAAA,EAAS,OAAA,EAAS,KAAA,CAAA;IAChD,MAAMI,MAAAA,GAASD,0BAAAA,CAAgBH,OAAAA,EAAS,QAAA,EAAU,KAAA,CAAA;AAClD,IAAA,qBACIK,eAAA,CAACC,MAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QACzBC,SAAAA,EAAW,CAAA,EAAGP,KAAAA,GAAQ,YAAA,GAAe,EAAA,CAAG,CAAC,EAAEE,MAAAA,GAAS,eAAA,GAAkB,EAAA,CAAA,CAAI,CAACM,IAAI,EAAA;QAC/EC,KAAAA,EAAO;AAAEC,YAAAA,KAAAA,EAAOV,QAAQ,+BAAA,GAAkC;AAA0B,SAAA;;AACnFW,YAAAA,yBAAAA,CAAeb,SAAS,MAAA,EAAQ,EAAA,CAAA;AAChCC,YAAAA,KAAAA,CAAMa;;;AAGnB;;;;"}

package/dist/cjs/screen/PrimeTitle.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var react = require('react');
+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.
+/**
+ * The `PrimeReact:title` component - one of Screenplay's screen directives.
+ *
+ * Renders a real heading element at the authored level rather than a styled span, because heading level
+ * is the document outline a screen reader navigates by; getting it right is not a styling choice. The
+ * level is clamped to 1-6 so an out-of-range value degrades to a valid heading instead of an invalid tag.
+ */ function PrimeTitle({ element }) {
+    const level = Math.min(6, Math.max(1, Math.round(properties.numberProperty(element, 'level', 1))));
+    const sizes = [
+        'text-3xl',
+        'text-2xl',
+        'text-xl',
+        'text-lg',
+        'text-base',
+        'text-sm'
+    ];
+    return /*#__PURE__*/ react.createElement(`h${level}`, {
+        'data-scene-id': element.id,
+        className: `${sizes[level - 1]} font-semibold`,
+        style: {
+            color: 'var(--scene-text-color)'
+        }
+    }, properties.stringProperty(element, 'text', ''));
+}
+
+exports.PrimeTitle = PrimeTitle;
+//# sourceMappingURL=PrimeTitle.js.map

package/dist/cjs/screen/PrimeTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeTitle.js","sources":["../../../screen/PrimeTitle.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 { createElement } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:title` component - one of Screenplay's screen directives.\n *\n * Renders a real heading element at the authored level rather than a styled span, because heading level\n * is the document outline a screen reader navigates by; getting it right is not a styling choice. The\n * level is clamped to 1-6 so an out-of-range value degrades to a valid heading instead of an invalid tag.\n */\nexport function PrimeTitle({ element }: RegisteredComponentProps) {\n    const level = Math.min(6, Math.max(1, Math.round(numberProperty(element, 'level', 1))));\n    const sizes = ['text-3xl', 'text-2xl', 'text-xl', 'text-lg', 'text-base', 'text-sm'];\n    return createElement(\n        `h${level}`,\n        {\n            'data-scene-id': element.id,\n            className: `${sizes[level - 1]} font-semibold`,\n            style: { color: 'var(--scene-text-color)' },\n        },\n        stringProperty(element, 'text', '')\n    );\n}\n"],"names":["PrimeTitle","element","level","Math","min","max","round","numberProperty","sizes","createElement","id","className","style","color","stringProperty"],"mappings":";;;;;AAAA;AACA;AAMA;;;;;;AAMC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAA4B,EAAA;AAC5D,IAAA,MAAMC,KAAAA,GAAQC,IAAAA,CAAKC,GAAG,CAAC,GAAGD,IAAAA,CAAKE,GAAG,CAAC,CAAA,EAAGF,IAAAA,CAAKG,KAAK,CAACC,yBAAAA,CAAeN,SAAS,OAAA,EAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AAClF,IAAA,MAAMO,KAAAA,GAAQ;AAAC,QAAA,UAAA;AAAY,QAAA,UAAA;AAAY,QAAA,SAAA;AAAW,QAAA,SAAA;AAAW,QAAA,WAAA;AAAa,QAAA;AAAU,KAAA;AACpF,IAAA,qBAAOC,mBAAAA,CACH,CAAC,CAAC,EAAEP,OAAO,EACX;AACI,QAAA,eAAA,EAAiBD,QAAQS,EAAE;AAC3BC,QAAAA,SAAAA,EAAW,GAAGH,KAAK,CAACN,QAAQ,CAAA,CAAE,CAAC,cAAc,CAAC;QAC9CU,KAAAA,EAAO;YAAEC,KAAAA,EAAO;AAA0B;KAC9C,EACAC,yBAAAA,CAAeb,SAAS,MAAA,EAAQ,EAAA,CAAA,CAAA;AAExC;;;;"}

package/dist/cjs/theme/applyPrimeReactTheme.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var primeReactThemeStylesheet = require('./primeReactThemeStylesheet.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Swaps the loaded PrimeReact theme stylesheet, live, with no reload and no remount.
+ *
+ * This follows the mechanism PrimeReact 10.9.8 implements in `PrimeReactContext.changeTheme` (see
+ * `node_modules/primereact/api/api.js`), because a PrimeReact 10 theme is a pre-compiled CSS file rather
+ * than a set of runtime variables - there is nothing to set, only a different file to load. What
+ * `changeTheme` does is find the `<link>` by id, build a new URL, create a *replacement* `<link>` element
+ * and swap it into the same position. Creating a new element rather than assigning to `href` is the part
+ * that matters: some browsers do not reliably re-fetch a stylesheet whose `href` is mutated in place.
+ *
+ * Two things are done differently, both deliberately:
+ *
+ * - PrimeReact string-replaces the old theme name anywhere in the URL. That breaks as soon as a theme
+ *   name also appears elsewhere in the path (an application served from `/nano/`, say, switching away
+ *   from the `nano` theme). This replaces the theme *folder segment* instead, which is unambiguous.
+ * - PrimeReact throws when the `<link>` is missing. Here a missing link is created, because a Scene host
+ *   embedding a preview has no reason to have pre-declared one, and refusing to theme a page for want of
+ *   an element we can add ourselves is not a useful failure.
+ *
+ * The application keeps ownership of *where* themes are served from: when the link already exists, only
+ * its theme folder is rewritten and the rest of the URL is left exactly as the host wrote it.
+ *
+ * @param themeName The theme to load, as named in `primeReactThemes`.
+ * @param linkElementId The id of the stylesheet `<link>`, matching PrimeReact's own `changeTheme` argument.
+ * @returns `true` when the stylesheet was swapped, `false` when the theme is unknown or there is no document.
+ */ function applyPrimeReactTheme(themeName, linkElementId = primeReactThemeStylesheet.themeLinkElementId) {
+    const stylesheet = primeReactThemeStylesheet.primeReactThemeStylesheet(themeName);
+    if (stylesheet === undefined || typeof document === 'undefined') return false;
+    const existing = document.getElementById(linkElementId);
+    const href = existing?.getAttribute('href');
+    const nextHref = href === undefined || href === null ? stylesheet : href.replace(/[^/]+\/theme\.css(\?.*)?$/, `${themeName}/theme.css$1`);
+    const link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('id', linkElementId);
+    link.setAttribute('href', nextHref);
+    if (existing?.parentNode) {
+        existing.parentNode.replaceChild(link, existing);
+    } else {
+        document.head.appendChild(link);
+    }
+    return true;
+}
+
+exports.applyPrimeReactTheme = applyPrimeReactTheme;
+//# sourceMappingURL=applyPrimeReactTheme.js.map

package/dist/cjs/theme/applyPrimeReactTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyPrimeReactTheme.js","sources":["../../../theme/applyPrimeReactTheme.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 { primeReactThemeStylesheet, themeLinkElementId } from './primeReactThemeStylesheet';\n\n/**\n * Swaps the loaded PrimeReact theme stylesheet, live, with no reload and no remount.\n *\n * This follows the mechanism PrimeReact 10.9.8 implements in `PrimeReactContext.changeTheme` (see\n * `node_modules/primereact/api/api.js`), because a PrimeReact 10 theme is a pre-compiled CSS file rather\n * than a set of runtime variables - there is nothing to set, only a different file to load. What\n * `changeTheme` does is find the `<link>` by id, build a new URL, create a *replacement* `<link>` element\n * and swap it into the same position. Creating a new element rather than assigning to `href` is the part\n * that matters: some browsers do not reliably re-fetch a stylesheet whose `href` is mutated in place.\n *\n * Two things are done differently, both deliberately:\n *\n * - PrimeReact string-replaces the old theme name anywhere in the URL. That breaks as soon as a theme\n *   name also appears elsewhere in the path (an application served from `/nano/`, say, switching away\n *   from the `nano` theme). This replaces the theme *folder segment* instead, which is unambiguous.\n * - PrimeReact throws when the `<link>` is missing. Here a missing link is created, because a Scene host\n *   embedding a preview has no reason to have pre-declared one, and refusing to theme a page for want of\n *   an element we can add ourselves is not a useful failure.\n *\n * The application keeps ownership of *where* themes are served from: when the link already exists, only\n * its theme folder is rewritten and the rest of the URL is left exactly as the host wrote it.\n *\n * @param themeName The theme to load, as named in `primeReactThemes`.\n * @param linkElementId The id of the stylesheet `<link>`, matching PrimeReact's own `changeTheme` argument.\n * @returns `true` when the stylesheet was swapped, `false` when the theme is unknown or there is no document.\n */\nexport function applyPrimeReactTheme(themeName: string, linkElementId: string = themeLinkElementId): boolean {\n    const stylesheet = primeReactThemeStylesheet(themeName);\n    if (stylesheet === undefined || typeof document === 'undefined') return false;\n\n    const existing = document.getElementById(linkElementId);\n    const href = existing?.getAttribute('href');\n    const nextHref = href === undefined || href === null ? stylesheet : href.replace(/[^/]+\\/theme\\.css(\\?.*)?$/, `${themeName}/theme.css$1`);\n\n    const link = document.createElement('link');\n    link.setAttribute('rel', 'stylesheet');\n    link.setAttribute('id', linkElementId);\n    link.setAttribute('href', nextHref);\n\n    if (existing?.parentNode) {\n        existing.parentNode.replaceChild(link, existing);\n    } else {\n        document.head.appendChild(link);\n    }\n\n    return true;\n}\n"],"names":["applyPrimeReactTheme","themeName","linkElementId","themeLinkElementId","stylesheet","primeReactThemeStylesheet","undefined","document","existing","getElementById","href","getAttribute","nextHref","replace","link","createElement","setAttribute","parentNode","replaceChild","head","appendChild"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBC,IACM,SAASA,oBAAAA,CAAqBC,SAAiB,EAAEC,gBAAwBC,4CAAkB,EAAA;AAC9F,IAAA,MAAMC,aAAaC,mDAAAA,CAA0BJ,SAAAA,CAAAA;AAC7C,IAAA,IAAIG,UAAAA,KAAeE,SAAAA,IAAa,OAAOC,QAAAA,KAAa,aAAa,OAAO,KAAA;IAExE,MAAMC,QAAAA,GAAWD,QAAAA,CAASE,cAAc,CAACP,aAAAA,CAAAA;IACzC,MAAMQ,IAAAA,GAAOF,UAAUG,YAAAA,CAAa,MAAA,CAAA;AACpC,IAAA,MAAMC,QAAAA,GAAWF,IAAAA,KAASJ,SAAAA,IAAaI,IAAAA,KAAS,IAAA,GAAON,UAAAA,GAAaM,IAAAA,CAAKG,OAAO,CAAC,2BAAA,EAA6B,CAAA,EAAGZ,SAAAA,CAAU,YAAY,CAAC,CAAA;IAExI,MAAMa,IAAAA,GAAOP,QAAAA,CAASQ,aAAa,CAAC,MAAA,CAAA;IACpCD,IAAAA,CAAKE,YAAY,CAAC,KAAA,EAAO,YAAA,CAAA;IACzBF,IAAAA,CAAKE,YAAY,CAAC,IAAA,EAAMd,aAAAA,CAAAA;IACxBY,IAAAA,CAAKE,YAAY,CAAC,MAAA,EAAQJ,QAAAA,CAAAA;AAE1B,IAAA,IAAIJ,UAAUS,UAAAA,EAAY;AACtBT,QAAAA,QAAAA,CAASS,UAAU,CAACC,YAAY,CAACJ,IAAAA,EAAMN,QAAAA,CAAAA;IAC3C,CAAA,MAAO;QACHD,QAAAA,CAASY,IAAI,CAACC,WAAW,CAACN,IAAAA,CAAAA;AAC9B,IAAA;IAEA,OAAO,IAAA;AACX;;;;"}

package/dist/cjs/theme/primeReactThemeStylesheet.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var primeReactThemes = require('./primeReactThemes.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The module path of a theme's compiled stylesheet.
+ *
+ * PrimeReact 10 themes are pre-compiled CSS files on disk, one folder per theme, so switching theme is
+ * ultimately a question of which file is loaded. This is the one place that knows the layout of those
+ * folders.
+ *
+ * An unknown name returns `undefined` rather than a plausible-looking path. A string built for a theme
+ * that does not exist would produce a 404 at load time and an unstyled application - a failure that
+ * shows up far from the typo that caused it - whereas `undefined` is checkable at the call site.
+ *
+ * @param themeName The theme name, as it appears in {@link primeReactThemes}.
+ * @returns The stylesheet path, or `undefined` when this package ships no theme by that name.
+ */ function primeReactThemeStylesheet(themeName) {
+    return primeReactThemes.primeReactTheme(themeName) === undefined ? undefined : `primereact/resources/themes/${themeName}/theme.css`;
+}
+/**
+ * The id of the `<link>` element the theme stylesheet is loaded through.
+ *
+ * PrimeReact's own `PrimeReactContext.changeTheme` takes this id as an argument and defaults to nothing;
+ * `theme-link` is the id PrimeReact's documentation and templates use, so matching it means an
+ * application already set up for PrimeReact theme switching needs no extra wiring to work with
+ * {@link usePrimeReactTheme}.
+ */ const themeLinkElementId = 'theme-link';
+
+exports.primeReactThemeStylesheet = primeReactThemeStylesheet;
+exports.themeLinkElementId = themeLinkElementId;
+//# sourceMappingURL=primeReactThemeStylesheet.js.map

package/dist/cjs/theme/primeReactThemeStylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primeReactThemeStylesheet.js","sources":["../../../theme/primeReactThemeStylesheet.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 { primeReactTheme } from './primeReactThemes';\n\n/**\n * The module path of a theme's compiled stylesheet.\n *\n * PrimeReact 10 themes are pre-compiled CSS files on disk, one folder per theme, so switching theme is\n * ultimately a question of which file is loaded. This is the one place that knows the layout of those\n * folders.\n *\n * An unknown name returns `undefined` rather than a plausible-looking path. A string built for a theme\n * that does not exist would produce a 404 at load time and an unstyled application - a failure that\n * shows up far from the typo that caused it - whereas `undefined` is checkable at the call site.\n *\n * @param themeName The theme name, as it appears in {@link primeReactThemes}.\n * @returns The stylesheet path, or `undefined` when this package ships no theme by that name.\n */\nexport function primeReactThemeStylesheet(themeName: string): string | undefined {\n    return primeReactTheme(themeName) === undefined ? undefined : `primereact/resources/themes/${themeName}/theme.css`;\n}\n\n/**\n * The id of the `<link>` element the theme stylesheet is loaded through.\n *\n * PrimeReact's own `PrimeReactContext.changeTheme` takes this id as an argument and defaults to nothing;\n * `theme-link` is the id PrimeReact's documentation and templates use, so matching it means an\n * application already set up for PrimeReact theme switching needs no extra wiring to work with\n * {@link usePrimeReactTheme}.\n */\nexport const themeLinkElementId = 'theme-link';\n"],"names":["primeReactThemeStylesheet","themeName","primeReactTheme","undefined","themeLinkElementId"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;IAcO,SAASA,yBAAAA,CAA0BC,SAAiB,EAAA;IACvD,OAAOC,gCAAAA,CAAgBD,eAAeE,SAAAA,GAAYA,SAAAA,GAAY,CAAC,4BAA4B,EAAEF,SAAAA,CAAU,UAAU,CAAC;AACtH;AAEA;;;;;;;IAQO,MAAMG,kBAAAA,GAAqB;;;;;"}

package/dist/cjs/theme/primeReactThemes.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var themePresets = require('./themePresets.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The packages a PrimeReact theme declares itself compatible with.
+ *
+ * `PrimeReact` and `Tailwind` are obvious - the stylesheet skins PrimeReact's components, and this
+ * package's own wrappers lay themselves out with Tailwind utilities.
+ *
+ * `core` is the interesting one, and it is listed deliberately rather than by reflex. A theme reaches a
+ * screen in two layers: a stylesheet that only ever matches PrimeReact's own `.p-*` elements, and a set
+ * of semantic Scene tokens that `SceneThemeProvider` writes onto the wrapping element. The second layer
+ * applies to *everything* underneath it, `core`'s unstyled primitives included - they inherit the
+ * theme's type color and can read any token they choose to. So the claim being made is precise: these
+ * themes genuinely reach `core`'s components, through tokens rather than through the component skin.
+ *
+ * This has to be said explicitly because `ThemeCompatibility` has no implicit exemption for `core`. A
+ * theme that leaves it out is reported incompatible for every profile that lists `core`, which for a
+ * theme that really does apply would be a false alarm on nearly every profile there is.
+ */ const primeReactThemeCompatibility = [
+    'PrimeReact',
+    'Tailwind',
+    'core'
+];
+/**
+ * Every free PrimeReact 10 theme this package ships, as Scene {@link Theme}s.
+ *
+ * None of these themes are ours. They are PrimeTek's, shipped under the MIT license that covers the
+ * whole `primereact` package (verified in `node_modules/primereact/LICENSE.md`: "The MIT License (MIT),
+ * Copyright (c) 2016-2025 PrimeTek"). Redistributing them without saying so would be dishonest, which is
+ * what `Theme`'s `author`, `authorUrl` and `license` fields exist to prevent - and why the credit is
+ * applied here, once, to every preset, rather than written out per theme where it could be forgotten.
+ *
+ * Several themes are PrimeTek's interpretation of someone else's design language - Bootstrap, Material
+ * Design, Fluent, Tailwind UI. The compiled CSS is still PrimeTek's own work, so PrimeTek is still the
+ * author; the lineage is recorded in each theme's description instead of by misattributing the file.
+ */ const primeReactThemes = themePresets.themePresets.map((preset)=>({
+        ...preset,
+        compatibleWith: primeReactThemeCompatibility,
+        author: 'PrimeTek',
+        authorUrl: 'https://primereact.org',
+        license: 'MIT'
+    }));
+/**
+ * The names of every theme this package ships, in catalog order - what the manifest declares and what a
+ * theme picker lists.
+ */ const primeReactThemeNames = primeReactThemes.map((theme)=>theme.name);
+/**
+ * Finds one of this package's themes by name.
+ *
+ * @param name The theme name, which is also its folder under `primereact/resources/themes`.
+ * @returns The theme, or `undefined` when this package does not ship one by that name.
+ */ function primeReactTheme(name) {
+    return primeReactThemes.find((theme)=>theme.name === name);
+}
+
+exports.primeReactTheme = primeReactTheme;
+exports.primeReactThemeCompatibility = primeReactThemeCompatibility;
+exports.primeReactThemeNames = primeReactThemeNames;
+exports.primeReactThemes = primeReactThemes;
+//# sourceMappingURL=primeReactThemes.js.map

package/dist/cjs/theme/primeReactThemes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primeReactThemes.js","sources":["../../../theme/primeReactThemes.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 { Theme } from '@cratis/scene.model';\nimport { themePresets } from './themePresets';\n\n/**\n * The packages a PrimeReact theme declares itself compatible with.\n *\n * `PrimeReact` and `Tailwind` are obvious - the stylesheet skins PrimeReact's components, and this\n * package's own wrappers lay themselves out with Tailwind utilities.\n *\n * `core` is the interesting one, and it is listed deliberately rather than by reflex. A theme reaches a\n * screen in two layers: a stylesheet that only ever matches PrimeReact's own `.p-*` elements, and a set\n * of semantic Scene tokens that `SceneThemeProvider` writes onto the wrapping element. The second layer\n * applies to *everything* underneath it, `core`'s unstyled primitives included - they inherit the\n * theme's type color and can read any token they choose to. So the claim being made is precise: these\n * themes genuinely reach `core`'s components, through tokens rather than through the component skin.\n *\n * This has to be said explicitly because `ThemeCompatibility` has no implicit exemption for `core`. A\n * theme that leaves it out is reported incompatible for every profile that lists `core`, which for a\n * theme that really does apply would be a false alarm on nearly every profile there is.\n */\nexport const primeReactThemeCompatibility: string[] = ['PrimeReact', 'Tailwind', 'core'];\n\n/**\n * Every free PrimeReact 10 theme this package ships, as Scene {@link Theme}s.\n *\n * None of these themes are ours. They are PrimeTek's, shipped under the MIT license that covers the\n * whole `primereact` package (verified in `node_modules/primereact/LICENSE.md`: \"The MIT License (MIT),\n * Copyright (c) 2016-2025 PrimeTek\"). Redistributing them without saying so would be dishonest, which is\n * what `Theme`'s `author`, `authorUrl` and `license` fields exist to prevent - and why the credit is\n * applied here, once, to every preset, rather than written out per theme where it could be forgotten.\n *\n * Several themes are PrimeTek's interpretation of someone else's design language - Bootstrap, Material\n * Design, Fluent, Tailwind UI. The compiled CSS is still PrimeTek's own work, so PrimeTek is still the\n * author; the lineage is recorded in each theme's description instead of by misattributing the file.\n */\nexport const primeReactThemes: Theme[] = themePresets.map((preset) => ({\n    ...preset,\n    compatibleWith: primeReactThemeCompatibility,\n    author: 'PrimeTek',\n    authorUrl: 'https://primereact.org',\n    license: 'MIT',\n}));\n\n/**\n * The names of every theme this package ships, in catalog order - what the manifest declares and what a\n * theme picker lists.\n */\nexport const primeReactThemeNames: string[] = primeReactThemes.map((theme) => theme.name);\n\n/**\n * Finds one of this package's themes by name.\n *\n * @param name The theme name, which is also its folder under `primereact/resources/themes`.\n * @returns The theme, or `undefined` when this package does not ship one by that name.\n */\nexport function primeReactTheme(name: string): Theme | undefined {\n    return primeReactThemes.find((theme) => theme.name === name);\n}\n"],"names":["primeReactThemeCompatibility","primeReactThemes","themePresets","map","preset","compatibleWith","author","authorUrl","license","primeReactThemeNames","theme","name","primeReactTheme","find"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;;;;;;;;;;UAiBaA,4BAAAA,GAAyC;AAAC,IAAA,YAAA;AAAc,IAAA,UAAA;AAAY,IAAA;;AAEjF;;;;;;;;;;;;UAaaC,gBAAAA,GAA4BC,yBAAAA,CAAaC,GAAG,CAAC,CAACC,UAAY;AACnE,QAAA,GAAGA,MAAM;QACTC,cAAAA,EAAgBL,4BAAAA;QAChBM,MAAAA,EAAQ,UAAA;QACRC,SAAAA,EAAW,wBAAA;QACXC,OAAAA,EAAS;AACb,KAAA,CAAA;AAEA;;;IAIO,MAAMC,oBAAAA,GAAiCR,gBAAAA,CAAiBE,GAAG,CAAC,CAACO,KAAAA,GAAUA,KAAAA,CAAMC,IAAI;AAExF;;;;;IAMO,SAASC,eAAAA,CAAgBD,IAAY,EAAA;AACxC,IAAA,OAAOV,iBAAiBY,IAAI,CAAC,CAACH,KAAAA,GAAUA,KAAAA,CAAMC,IAAI,KAAKA,IAAAA,CAAAA;AAC3D;;;;;;;"}