@cratis/scene.primereact 1.1.0 → 3.0.0

package/dist/cjs/panel/PrimeAccordion.js

@@ -7,22 +7,52 @@ var properties = require('../properties.js');
 /**
  * The `PrimeReact:accordion` component - stacked sections of which one is open at a time.
  *
- * Accordion identifies its sections by React element type (`AccordionTab`), so a Scene adapter wrapping
- * one would not be recognized. Sections are therefore paired here: the `headers` property gives the
- * titles and the `content` slot gives the bodies, matched by position. A screen puts as many children in
- * the slot as it lists headers.
+ * Sections are paired by position: the `headers` property gives the titles and the `content` slot gives
+ * the bodies. That pairing is a consequence of the Scene model rather than of PrimeReact - a slot arrives
+ * as a flat list of already-rendered children with nowhere to hang a per-child title - so a screen puts as
+ * many children in the slot as it lists headers.
+ *
+ * PrimeReact 11 replaced `AccordionTab` with a `Accordion.Panel` / `Header` / `Trigger` / `Content`
+ * composition keyed by an explicit `value`, which retires the v10 constraint that sections had to *be*
+ * `AccordionTab` elements for the accordion to recognize them. The index doubles as that value, so the
+ * `activeIndex` property still means what it always did. It is passed as `defaultValue` rather than
+ * `value` because a screen states which section starts open - binding it as the controlled value would
+ * pin the accordion to that section and silently swallow every click.
  */ function PrimeAccordion({ element, slots }) {
     const headers = properties.stringArrayProperty(element, 'headers');
     const bodies = slots.content ?? [];
     const count = Math.max(headers.length, bodies.length);
-    return /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion, {
+    return /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Root, {
         "data-scene-id": element.id,
-        activeIndex: properties.numberProperty(element, 'activeIndex', 0),
+        defaultValue: String(properties.numberProperty(element, 'activeIndex', 0)),
         children: Array.from({
             length: count
-        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsx(accordion.AccordionTab, {
-                header: headers[index] ?? `Section ${index + 1}`,
-                children: bodies[index]
+        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsxs(accordion.Accordion.Panel, {
+                value: String(index),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Header, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(accordion.Accordion.Trigger, {
+                            children: [
+                                headers[index] ?? `Section ${index + 1}`,
+                                /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Indicator, {
+                                    match: "open",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                        className: "pi pi-chevron-up"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Indicator, {
+                                    match: "closed",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                        className: "pi pi-chevron-down"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(accordion.Accordion.Content, {
+                        children: bodies[index]
+                    })
+                ]
             }, index))
     });
 }

package/dist/cjs/panel/PrimeAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeAccordion.js","sources":["../../../panel/PrimeAccordion.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 { Accordion, AccordionTab } from 'primereact/accordion';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringArrayProperty } from '../properties';\n\n/**\n * The `PrimeReact:accordion` component - stacked sections of which one is open at a time.\n *\n * Accordion identifies its sections by React element type (`AccordionTab`), so a Scene adapter wrapping\n * one would not be recognized. Sections are therefore paired here: the `headers` property gives the\n * titles and the `content` slot gives the bodies, matched by position. A screen puts as many children in\n * the slot as it lists headers.\n */\nexport function PrimeAccordion({ element, slots }: RegisteredComponentProps) {\n    const headers = stringArrayProperty(element, 'headers');\n    const bodies = slots.content ?? [];\n    const count = Math.max(headers.length, bodies.length);\n    return (\n        <Accordion data-scene-id={element.id} activeIndex={numberProperty(element, 'activeIndex', 0)}>\n            {Array.from({ length: count }, (_, index) => (\n                <AccordionTab key={index} header={headers[index] ?? `Section ${index + 1}`}>\n                    {bodies[index]}\n                </AccordionTab>\n            ))}\n        </Accordion>\n    );\n}\n"],"names":["PrimeAccordion","element","slots","headers","stringArrayProperty","bodies","content","count","Math","max","length","_jsx","Accordion","data-scene-id","id","activeIndex","numberProperty","Array","from","_","index","AccordionTab","header"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACvE,MAAMC,OAAAA,GAAUC,+BAAoBH,OAAAA,EAAS,SAAA,CAAA;AAC7C,IAAA,MAAMI,MAAAA,GAASH,KAAAA,CAAMI,OAAO,IAAI,EAAE;IAClC,MAAMC,KAAAA,GAAQC,KAAKC,GAAG,CAACN,QAAQO,MAAM,EAAEL,OAAOK,MAAM,CAAA;AACpD,IAAA,qBACIC,cAAA,CAACC,mBAAAA,EAAAA;AAAUC,QAAAA,eAAAA,EAAeZ,QAAQa,EAAE;QAAEC,WAAAA,EAAaC,yBAAAA,CAAef,SAAS,aAAA,EAAe,CAAA,CAAA;AACrFgB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAC;YAAER,MAAAA,EAAQH;SAAM,EAAG,CAACY,CAAAA,EAAGC,KAAAA,iBAC/BT,cAAA,CAACU,sBAAAA,EAAAA;gBAAyBC,MAAAA,EAAQnB,OAAO,CAACiB,KAAAA,CAAM,IAAI,CAAC,QAAQ,EAAEA,QAAQ,CAAA,CAAA,CAAG;AACrEf,gBAAAA,QAAAA,EAAAA,MAAM,CAACe,KAAAA;AADOA,aAAAA,EAAAA,KAAAA,CAAAA;;AAMnC;;;;"}
+{"version":3,"file":"PrimeAccordion.js","sources":["../../../panel/PrimeAccordion.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 { Accordion } from 'primereact/accordion';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringArrayProperty } from '../properties';\n\n/**\n * The `PrimeReact:accordion` component - stacked sections of which one is open at a time.\n *\n * Sections are paired by position: the `headers` property gives the titles and the `content` slot gives\n * the bodies. That pairing is a consequence of the Scene model rather than of PrimeReact - a slot arrives\n * as a flat list of already-rendered children with nowhere to hang a per-child title - so a screen puts as\n * many children in the slot as it lists headers.\n *\n * PrimeReact 11 replaced `AccordionTab` with a `Accordion.Panel` / `Header` / `Trigger` / `Content`\n * composition keyed by an explicit `value`, which retires the v10 constraint that sections had to *be*\n * `AccordionTab` elements for the accordion to recognize them. The index doubles as that value, so the\n * `activeIndex` property still means what it always did. It is passed as `defaultValue` rather than\n * `value` because a screen states which section starts open - binding it as the controlled value would\n * pin the accordion to that section and silently swallow every click.\n */\nexport function PrimeAccordion({ element, slots }: RegisteredComponentProps) {\n    const headers = stringArrayProperty(element, 'headers');\n    const bodies = slots.content ?? [];\n    const count = Math.max(headers.length, bodies.length);\n    return (\n        <Accordion.Root data-scene-id={element.id} defaultValue={String(numberProperty(element, 'activeIndex', 0))}>\n            {Array.from({ length: count }, (_, index) => (\n                <Accordion.Panel key={index} value={String(index)}>\n                    <Accordion.Header>\n                        <Accordion.Trigger>\n                            {headers[index] ?? `Section ${index + 1}`}\n                            <Accordion.Indicator match='open'>\n                                <i className='pi pi-chevron-up' />\n                            </Accordion.Indicator>\n                            <Accordion.Indicator match='closed'>\n                                <i className='pi pi-chevron-down' />\n                            </Accordion.Indicator>\n                        </Accordion.Trigger>\n                    </Accordion.Header>\n                    <Accordion.Content>{bodies[index]}</Accordion.Content>\n                </Accordion.Panel>\n            ))}\n        </Accordion.Root>\n    );\n}\n"],"names":["PrimeAccordion","element","slots","headers","stringArrayProperty","bodies","content","count","Math","max","length","_jsx","Accordion","Root","data-scene-id","id","defaultValue","String","numberProperty","Array","from","_","index","_jsxs","Panel","value","Header","Trigger","Indicator","match","i","className","Content"],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcC,IACM,SAASA,cAAAA,CAAe,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACvE,MAAMC,OAAAA,GAAUC,+BAAoBH,OAAAA,EAAS,SAAA,CAAA;AAC7C,IAAA,MAAMI,MAAAA,GAASH,KAAAA,CAAMI,OAAO,IAAI,EAAE;IAClC,MAAMC,KAAAA,GAAQC,KAAKC,GAAG,CAACN,QAAQO,MAAM,EAAEL,OAAOK,MAAM,CAAA;IACpD,qBACIC,cAAA,CAACC,oBAAUC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeb,QAAQc,EAAE;QAAEC,YAAAA,EAAcC,MAAAA,CAAOC,yBAAAA,CAAejB,OAAAA,EAAS,aAAA,EAAe,CAAA,CAAA,CAAA;AAClGkB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAC;YAAEV,MAAAA,EAAQH;AAAM,SAAA,EAAG,CAACc,CAAAA,EAAGC,KAAAA,iBAC/BC,eAAA,CAACX,oBAAUY,KAAK,EAAA;AAAaC,gBAAAA,KAAAA,EAAOR,MAAAA,CAAOK,KAAAA,CAAAA;;AACvC,kCAAAX,cAAA,CAACC,oBAAUc,MAAM,EAAA;gDACbH,eAAA,CAACX,oBAAUe,OAAO,EAAA;;AACbxB,gCAAAA,OAAO,CAACmB,KAAAA,CAAM,IAAI,CAAC,QAAQ,EAAEA,QAAQ,CAAA,CAAA,CAAG;AACzC,8CAAAX,cAAA,CAACC,oBAAUgB,SAAS,EAAA;oCAACC,KAAAA,EAAM,MAAA;AACvB,oCAAA,QAAA,gBAAAlB,cAAA,CAACmB,GAAAA,EAAAA;wCAAEC,SAAAA,EAAU;;;AAEjB,8CAAApB,cAAA,CAACC,oBAAUgB,SAAS,EAAA;oCAACC,KAAAA,EAAM,QAAA;AACvB,oCAAA,QAAA,gBAAAlB,cAAA,CAACmB,GAAAA,EAAAA;wCAAEC,SAAAA,EAAU;;;;;;AAIzB,kCAAApB,cAAA,CAACC,oBAAUoB,OAAO,EAAA;AAAE3B,wBAAAA,QAAAA,EAAAA,MAAM,CAACiB,KAAAA;;;AAZTA,aAAAA,EAAAA,KAAAA,CAAAA;;AAiBtC;;;;"}

package/dist/cjs/panel/PrimeCard.js

@@ -10,12 +10,33 @@ var properties = require('../properties.js');
  * One of the three names this package deliberately shares with `core` (alongside `text` and `button`), so
  * a profile that lists `core` and then `PrimeReact` upgrades every card on every screen to a themed one
  * without a single screen being edited.
+ *
+ * PrimeReact 11 turned `Card` into a namespace of parts, so the v10 `title` / `subTitle` props no longer
+ * exist - the caption is something the adapter assembles. The caption block is omitted entirely when a
+ * screen supplies neither, because an empty `Card.Caption` still reserves its spacing and would leave an
+ * unexplained gap above the body of an untitled card.
  */ function PrimeCard({ element, slots }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(card.Card, {
+    const title = properties.stringProperty(element, 'title');
+    const subtitle = properties.stringProperty(element, 'subtitle');
+    return /*#__PURE__*/ jsxRuntime.jsx(card.Card.Root, {
         "data-scene-id": element.id,
-        title: properties.stringProperty(element, 'title'),
-        subTitle: properties.stringProperty(element, 'subtitle'),
-        children: slots.content
+        children: /*#__PURE__*/ jsxRuntime.jsxs(card.Card.Body, {
+            children: [
+                (title !== undefined || subtitle !== undefined) && /*#__PURE__*/ jsxRuntime.jsxs(card.Card.Caption, {
+                    children: [
+                        title !== undefined && /*#__PURE__*/ jsxRuntime.jsx(card.Card.Title, {
+                            children: title
+                        }),
+                        subtitle !== undefined && /*#__PURE__*/ jsxRuntime.jsx(card.Card.Subtitle, {
+                            children: subtitle
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(card.Card.Content, {
+                    children: slots.content
+                })
+            ]
+        })
     });
 }
 

package/dist/cjs/panel/PrimeCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeCard.js","sources":["../../../panel/PrimeCard.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 { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:card` component.\n *\n * One of the three names this package deliberately shares with `core` (alongside `text` and `button`), so\n * a profile that lists `core` and then `PrimeReact` upgrades every card on every screen to a themed one\n * without a single screen being edited.\n */\nexport function PrimeCard({ element, slots }: RegisteredComponentProps) {\n    return (\n        <Card data-scene-id={element.id} title={stringProperty(element, 'title')} subTitle={stringProperty(element, 'subtitle')}>\n            {slots.content}\n        </Card>\n    );\n}\n"],"names":["PrimeCard","element","slots","_jsx","Card","data-scene-id","id","title","stringProperty","subTitle","content"],"mappings":";;;;;;AAOA;;;;;;AAMC,IACM,SAASA,SAAAA,CAAU,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AAClE,IAAA,qBACIC,cAAA,CAACC,SAAAA,EAAAA;AAAKC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AAAEC,QAAAA,KAAAA,EAAOC,0BAAeP,OAAAA,EAAS,OAAA,CAAA;AAAUQ,QAAAA,QAAAA,EAAUD,0BAAeP,OAAAA,EAAS,UAAA,CAAA;AACvGC,QAAAA,QAAAA,EAAAA,KAAAA,CAAMQ;;AAGnB;;;;"}
+{"version":3,"file":"PrimeCard.js","sources":["../../../panel/PrimeCard.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 { stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:card` component.\n *\n * One of the three names this package deliberately shares with `core` (alongside `text` and `button`), so\n * a profile that lists `core` and then `PrimeReact` upgrades every card on every screen to a themed one\n * without a single screen being edited.\n *\n * PrimeReact 11 turned `Card` into a namespace of parts, so the v10 `title` / `subTitle` props no longer\n * exist - the caption is something the adapter assembles. The caption block is omitted entirely when a\n * screen supplies neither, because an empty `Card.Caption` still reserves its spacing and would leave an\n * unexplained gap above the body of an untitled card.\n */\nexport function PrimeCard({ element, slots }: RegisteredComponentProps) {\n    const title = stringProperty(element, 'title');\n    const subtitle = stringProperty(element, 'subtitle');\n    return (\n        <Card.Root data-scene-id={element.id}>\n            <Card.Body>\n                {(title !== undefined || subtitle !== undefined) && (\n                    <Card.Caption>\n                        {title !== undefined && <Card.Title>{title}</Card.Title>}\n                        {subtitle !== undefined && <Card.Subtitle>{subtitle}</Card.Subtitle>}\n                    </Card.Caption>\n                )}\n                <Card.Content>{slots.content}</Card.Content>\n            </Card.Body>\n        </Card.Root>\n    );\n}\n"],"names":["PrimeCard","element","slots","title","stringProperty","subtitle","_jsx","Card","Root","data-scene-id","id","_jsxs","Body","undefined","Caption","Title","Subtitle","Content","content"],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,SAAAA,CAAU,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IAClE,MAAMC,KAAAA,GAAQC,0BAAeH,OAAAA,EAAS,OAAA,CAAA;IACtC,MAAMI,QAAAA,GAAWD,0BAAeH,OAAAA,EAAS,UAAA,CAAA;IACzC,qBACIK,cAAA,CAACC,UAAKC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeR,QAAQS,EAAE;gCAChCC,eAAA,CAACJ,UAAKK,IAAI,EAAA;;AACJT,gBAAAA,CAAAA,UAAUU,SAAAA,IAAaR,QAAAA,KAAaQ,SAAQ,mBAC1CF,eAAA,CAACJ,UAAKO,OAAO,EAAA;;wBACRX,KAAAA,KAAUU,SAAAA,kBAAaP,cAAA,CAACC,SAAAA,CAAKQ,KAAK,EAAA;AAAEZ,4BAAAA,QAAAA,EAAAA;;wBACpCE,QAAAA,KAAaQ,SAAAA,kBAAaP,cAAA,CAACC,SAAAA,CAAKS,QAAQ,EAAA;AAAEX,4BAAAA,QAAAA,EAAAA;;;;AAGnD,8BAAAC,cAAA,CAACC,UAAKU,OAAO,EAAA;AAAEf,oBAAAA,QAAAA,EAAAA,KAAAA,CAAMgB;;;;;AAIrC;;;;"}

package/dist/cjs/panel/PrimeDivider.js

@@ -6,11 +6,16 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:divider` component - a rule separating content, optionally with a caption in it.
+ *
+ * The last component in this family PrimeReact 11 left monolithic, so the port is only a prop rename:
+ * v10's `layout` is v11's `orientation`. The Scene property keeps the name `layout`, because a screen's
+ * property vocabulary is this package's contract with authored content and renaming it would break every
+ * screen that set it to buy nothing.
  */ function PrimeDivider({ element }) {
     const label = properties.stringProperty(element, 'label');
     return /*#__PURE__*/ jsxRuntime.jsx(divider.Divider, {
         "data-scene-id": element.id,
-        layout: properties.stringProperty(element, 'layout', 'horizontal'),
+        orientation: properties.stringProperty(element, 'layout', 'horizontal'),
         align: properties.stringProperty(element, 'align'),
         type: properties.stringProperty(element, 'type', 'solid'),
         children: label

package/dist/cjs/panel/PrimeDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeDivider.js","sources":["../../../panel/PrimeDivider.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:divider` component - a rule separating content, optionally with a caption in it.\n */\nexport function PrimeDivider({ element }: RegisteredComponentProps) {\n    const label = stringProperty(element, 'label');\n    return (\n        <Divider\n            data-scene-id={element.id}\n            layout={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}\n            align={stringProperty(element, 'align') as 'center' | 'left' | 'right' | 'top' | 'bottom' | undefined}\n            type={stringProperty(element, 'type', 'solid') as 'solid' | 'dashed' | 'dotted'}>\n            {label}\n        </Divider>\n    );\n}\n"],"names":["PrimeDivider","element","label","stringProperty","_jsx","Divider","data-scene-id","id","layout","align","type"],"mappings":";;;;;;AAOA;;AAEC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;IAC9D,MAAMC,KAAAA,GAAQC,0BAAeF,OAAAA,EAAS,OAAA,CAAA;AACtC,IAAA,qBACIG,cAAA,CAACC,eAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeL,QAAQM,EAAE;QACzBC,MAAAA,EAAQL,yBAAAA,CAAeF,SAAS,QAAA,EAAU,YAAA,CAAA;AAC1CQ,QAAAA,KAAAA,EAAON,0BAAeF,OAAAA,EAAS,OAAA,CAAA;QAC/BS,IAAAA,EAAMP,yBAAAA,CAAeF,SAAS,MAAA,EAAQ,OAAA,CAAA;AACrCC,QAAAA,QAAAA,EAAAA;;AAGb;;;;"}
+{"version":3,"file":"PrimeDivider.js","sources":["../../../panel/PrimeDivider.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:divider` component - a rule separating content, optionally with a caption in it.\n *\n * The last component in this family PrimeReact 11 left monolithic, so the port is only a prop rename:\n * v10's `layout` is v11's `orientation`. The Scene property keeps the name `layout`, because a screen's\n * property vocabulary is this package's contract with authored content and renaming it would break every\n * screen that set it to buy nothing.\n */\nexport function PrimeDivider({ element }: RegisteredComponentProps) {\n    const label = stringProperty(element, 'label');\n    return (\n        <Divider\n            data-scene-id={element.id}\n            orientation={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}\n            align={stringProperty(element, 'align') as 'center' | 'left' | 'right' | 'top' | 'bottom' | undefined}\n            type={stringProperty(element, 'type', 'solid') as 'solid' | 'dashed' | 'dotted'}>\n            {label}\n        </Divider>\n    );\n}\n"],"names":["PrimeDivider","element","label","stringProperty","_jsx","Divider","data-scene-id","id","orientation","align","type"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,YAAAA,CAAa,EAAEC,OAAO,EAA4B,EAAA;IAC9D,MAAMC,KAAAA,GAAQC,0BAAeF,OAAAA,EAAS,OAAA,CAAA;AACtC,IAAA,qBACIG,cAAA,CAACC,eAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeL,QAAQM,EAAE;QACzBC,WAAAA,EAAaL,yBAAAA,CAAeF,SAAS,QAAA,EAAU,YAAA,CAAA;AAC/CQ,QAAAA,KAAAA,EAAON,0BAAeF,OAAAA,EAAS,OAAA,CAAA;QAC/BS,IAAAA,EAAMP,yBAAAA,CAAeF,SAAS,MAAA,EAAQ,OAAA,CAAA;AACrCC,QAAAA,QAAAA,EAAAA;;AAGb;;;;"}

package/dist/cjs/panel/PrimeFieldset.js

@@ -6,12 +6,45 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:fieldset` component - a container whose legend sits on its border.
+ *
+ * PrimeReact 11 dropped the `toggleable` prop entirely: a compositional `Fieldset` is collapsible exactly
+ * when its legend contains a `Fieldset.Trigger`, and inert when it does not. The Scene `toggleable`
+ * property therefore selects between two legend shapes rather than setting a flag. Both are rendered as a
+ * real `<legend>` either way, so the non-toggleable case does not pay for a button it never uses - which
+ * also keeps a static fieldset out of the tab order.
  */ function PrimeFieldset({ element, slots }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset, {
+    const legend = properties.stringProperty(element, 'legend');
+    return /*#__PURE__*/ jsxRuntime.jsxs(fieldset.Fieldset.Root, {
         "data-scene-id": element.id,
-        legend: properties.stringProperty(element, 'legend'),
-        toggleable: properties.booleanProperty(element, 'toggleable', false),
-        children: slots.content
+        defaultOpen: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Legend, {
+                children: properties.booleanProperty(element, 'toggleable', false) ? /*#__PURE__*/ jsxRuntime.jsxs(fieldset.Fieldset.Trigger, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Title, {
+                            children: legend
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Indicator, {
+                            match: "open",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                className: "pi pi-chevron-up"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Indicator, {
+                            match: "closed",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                className: "pi pi-chevron-down"
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Title, {
+                    children: legend
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(fieldset.Fieldset.Content, {
+                children: slots.content
+            })
+        ]
     });
 }
 

package/dist/cjs/panel/PrimeFieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeFieldset.js","sources":["../../../panel/PrimeFieldset.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 { Fieldset } from 'primereact/fieldset';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:fieldset` component - a container whose legend sits on its border.\n */\nexport function PrimeFieldset({ element, slots }: RegisteredComponentProps) {\n    return (\n        <Fieldset data-scene-id={element.id} legend={stringProperty(element, 'legend')} toggleable={booleanProperty(element, 'toggleable', false)}>\n            {slots.content}\n        </Fieldset>\n    );\n}\n"],"names":["PrimeFieldset","element","slots","_jsx","Fieldset","data-scene-id","id","legend","stringProperty","toggleable","booleanProperty","content"],"mappings":";;;;;;AAOA;;AAEC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACtE,IAAA,qBACIC,cAAA,CAACC,iBAAAA,EAAAA;AAASC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AAAEC,QAAAA,MAAAA,EAAQC,0BAAeP,OAAAA,EAAS,QAAA,CAAA;QAAWQ,UAAAA,EAAYC,0BAAAA,CAAgBT,SAAS,YAAA,EAAc,KAAA,CAAA;AAC9HC,QAAAA,QAAAA,EAAAA,KAAAA,CAAMS;;AAGnB;;;;"}
+{"version":3,"file":"PrimeFieldset.js","sources":["../../../panel/PrimeFieldset.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 { Fieldset } from 'primereact/fieldset';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:fieldset` component - a container whose legend sits on its border.\n *\n * PrimeReact 11 dropped the `toggleable` prop entirely: a compositional `Fieldset` is collapsible exactly\n * when its legend contains a `Fieldset.Trigger`, and inert when it does not. The Scene `toggleable`\n * property therefore selects between two legend shapes rather than setting a flag. Both are rendered as a\n * real `<legend>` either way, so the non-toggleable case does not pay for a button it never uses - which\n * also keeps a static fieldset out of the tab order.\n */\nexport function PrimeFieldset({ element, slots }: RegisteredComponentProps) {\n    const legend = stringProperty(element, 'legend');\n    return (\n        <Fieldset.Root data-scene-id={element.id} defaultOpen>\n            <Fieldset.Legend>\n                {booleanProperty(element, 'toggleable', false) ? (\n                    <Fieldset.Trigger>\n                        <Fieldset.Title>{legend}</Fieldset.Title>\n                        <Fieldset.Indicator match='open'>\n                            <i className='pi pi-chevron-up' />\n                        </Fieldset.Indicator>\n                        <Fieldset.Indicator match='closed'>\n                            <i className='pi pi-chevron-down' />\n                        </Fieldset.Indicator>\n                    </Fieldset.Trigger>\n                ) : (\n                    <Fieldset.Title>{legend}</Fieldset.Title>\n                )}\n            </Fieldset.Legend>\n            <Fieldset.Content>{slots.content}</Fieldset.Content>\n        </Fieldset.Root>\n    );\n}\n"],"names":["PrimeFieldset","element","slots","legend","stringProperty","_jsxs","Fieldset","Root","data-scene-id","id","defaultOpen","_jsx","Legend","booleanProperty","Trigger","Title","Indicator","match","i","className","Content","content"],"mappings":";;;;;;AAOA;;;;;;;;AAQC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACtE,MAAMC,MAAAA,GAASC,0BAAeH,OAAAA,EAAS,QAAA,CAAA;IACvC,qBACII,eAAA,CAACC,kBAASC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEC,WAAW,EAAA,IAAA;;AACjD,0BAAAC,cAAA,CAACL,kBAASM,MAAM,EAAA;AACXC,gBAAAA,QAAAA,EAAAA,0BAAAA,CAAgBZ,OAAAA,EAAS,YAAA,EAAc,KAAA,CAAA,iBACpCI,eAAA,CAACC,kBAASQ,OAAO,EAAA;;AACb,sCAAAH,cAAA,CAACL,kBAASS,KAAK,EAAA;AAAEZ,4BAAAA,QAAAA,EAAAA;;AACjB,sCAAAQ,cAAA,CAACL,kBAASU,SAAS,EAAA;4BAACC,KAAAA,EAAM,MAAA;AACtB,4BAAA,QAAA,gBAAAN,cAAA,CAACO,GAAAA,EAAAA;gCAAEC,SAAAA,EAAU;;;AAEjB,sCAAAR,cAAA,CAACL,kBAASU,SAAS,EAAA;4BAACC,KAAAA,EAAM,QAAA;AACtB,4BAAA,QAAA,gBAAAN,cAAA,CAACO,GAAAA,EAAAA;gCAAEC,SAAAA,EAAU;;;;AAIrB,iBAAA,CAAA,iBAAAR,cAAA,CAACL,kBAASS,KAAK,EAAA;AAAEZ,oBAAAA,QAAAA,EAAAA;;;AAGzB,0BAAAQ,cAAA,CAACL,kBAASc,OAAO,EAAA;AAAElB,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMmB;;;;AAGrC;;;;"}

package/dist/cjs/panel/PrimePanel.js

@@ -6,13 +6,49 @@ var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:panel` component - a titled container that can optionally collapse.
+ *
+ * PrimeReact 11 made `Panel` compositional, which moves one decision into the adapter that v10 made
+ * internally: the collapse affordance exists only if something renders a `Panel.Trigger`. Rendering one
+ * unconditionally would put a chevron on every panel, including the ones a screen declared as fixed, so
+ * the trigger is tied to the same `toggleable` property that enables the behavior.
+ *
+ * The `collapsed` property is expressed as `defaultOpen` rather than a controlled `open`, because a
+ * screen states the *initial* state; holding the panel open or shut against the user's clicks is not what
+ * `collapsed: true` means.
  */ function PrimePanel({ element, slots }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(panel.Panel, {
+    const toggleable = properties.booleanProperty(element, 'toggleable', false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(panel.Panel.Root, {
         "data-scene-id": element.id,
-        header: properties.stringProperty(element, 'header'),
-        toggleable: properties.booleanProperty(element, 'toggleable', false),
-        collapsed: properties.booleanProperty(element, 'collapsed', false),
-        children: slots.content
+        toggleable: toggleable,
+        defaultOpen: !properties.booleanProperty(element, 'collapsed', false),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(panel.Panel.Header, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(panel.Panel.Title, {
+                        children: properties.stringProperty(element, 'header')
+                    }),
+                    toggleable && /*#__PURE__*/ jsxRuntime.jsxs(panel.Panel.Trigger, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(panel.Panel.Indicator, {
+                                match: "open",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-chevron-up"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(panel.Panel.Indicator, {
+                                match: "closed",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("i", {
+                                    className: "pi pi-chevron-down"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(panel.Panel.Content, {
+                children: slots.content
+            })
+        ]
     });
 }
 

package/dist/cjs/panel/PrimePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimePanel.js","sources":["../../../panel/PrimePanel.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 { Panel } from 'primereact/panel';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:panel` component - a titled container that can optionally collapse.\n */\nexport function PrimePanel({ element, slots }: RegisteredComponentProps) {\n    return (\n        <Panel\n            data-scene-id={element.id}\n            header={stringProperty(element, 'header')}\n            toggleable={booleanProperty(element, 'toggleable', false)}\n            collapsed={booleanProperty(element, 'collapsed', false)}>\n            {slots.content}\n        </Panel>\n    );\n}\n"],"names":["PrimePanel","element","slots","_jsx","Panel","data-scene-id","id","header","stringProperty","toggleable","booleanProperty","collapsed","content"],"mappings":";;;;;;AAOA;;AAEC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACnE,IAAA,qBACIC,cAAA,CAACC,WAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;AACzBC,QAAAA,MAAAA,EAAQC,0BAAeP,OAAAA,EAAS,QAAA,CAAA;QAChCQ,UAAAA,EAAYC,0BAAAA,CAAgBT,SAAS,YAAA,EAAc,KAAA,CAAA;QACnDU,SAAAA,EAAWD,0BAAAA,CAAgBT,SAAS,WAAA,EAAa,KAAA,CAAA;AAChDC,QAAAA,QAAAA,EAAAA,KAAAA,CAAMU;;AAGnB;;;;"}
+{"version":3,"file":"PrimePanel.js","sources":["../../../panel/PrimePanel.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 { Panel } from 'primereact/panel';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { booleanProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:panel` component - a titled container that can optionally collapse.\n *\n * PrimeReact 11 made `Panel` compositional, which moves one decision into the adapter that v10 made\n * internally: the collapse affordance exists only if something renders a `Panel.Trigger`. Rendering one\n * unconditionally would put a chevron on every panel, including the ones a screen declared as fixed, so\n * the trigger is tied to the same `toggleable` property that enables the behavior.\n *\n * The `collapsed` property is expressed as `defaultOpen` rather than a controlled `open`, because a\n * screen states the *initial* state; holding the panel open or shut against the user's clicks is not what\n * `collapsed: true` means.\n */\nexport function PrimePanel({ element, slots }: RegisteredComponentProps) {\n    const toggleable = booleanProperty(element, 'toggleable', false);\n    return (\n        <Panel.Root data-scene-id={element.id} toggleable={toggleable} defaultOpen={!booleanProperty(element, 'collapsed', false)}>\n            <Panel.Header>\n                <Panel.Title>{stringProperty(element, 'header')}</Panel.Title>\n                {toggleable && (\n                    <Panel.Trigger>\n                        <Panel.Indicator match='open'>\n                            <i className='pi pi-chevron-up' />\n                        </Panel.Indicator>\n                        <Panel.Indicator match='closed'>\n                            <i className='pi pi-chevron-down' />\n                        </Panel.Indicator>\n                    </Panel.Trigger>\n                )}\n            </Panel.Header>\n            <Panel.Content>{slots.content}</Panel.Content>\n        </Panel.Root>\n    );\n}\n"],"names":["PrimePanel","element","slots","toggleable","booleanProperty","_jsxs","Panel","Root","data-scene-id","id","defaultOpen","Header","_jsx","Title","stringProperty","Trigger","Indicator","match","i","className","Content","content"],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWC,IACM,SAASA,UAAAA,CAAW,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACnE,MAAMC,UAAAA,GAAaC,0BAAAA,CAAgBH,OAAAA,EAAS,YAAA,EAAc,KAAA,CAAA;IAC1D,qBACII,eAAA,CAACC,YAAMC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeP,QAAQQ,EAAE;QAAEN,UAAAA,EAAYA,UAAAA;QAAYO,WAAAA,EAAa,CAACN,0BAAAA,CAAgBH,OAAAA,EAAS,WAAA,EAAa,KAAA,CAAA;;AAC/G,0BAAAI,eAAA,CAACC,YAAMK,MAAM,EAAA;;AACT,kCAAAC,cAAA,CAACN,YAAMO,KAAK,EAAA;AAAEC,wBAAAA,QAAAA,EAAAA,yBAAAA,CAAeb,OAAAA,EAAS,QAAA;;oBACrCE,UAAAA,kBACGE,eAAA,CAACC,YAAMS,OAAO,EAAA;;AACV,0CAAAH,cAAA,CAACN,YAAMU,SAAS,EAAA;gCAACC,KAAAA,EAAM,MAAA;AACnB,gCAAA,QAAA,gBAAAL,cAAA,CAACM,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;AAEjB,0CAAAP,cAAA,CAACN,YAAMU,SAAS,EAAA;gCAACC,KAAAA,EAAM,QAAA;AACnB,gCAAA,QAAA,gBAAAL,cAAA,CAACM,GAAAA,EAAAA;oCAAEC,SAAAA,EAAU;;;;;;;AAK7B,0BAAAP,cAAA,CAACN,YAAMc,OAAO,EAAA;AAAElB,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMmB;;;;AAGlC;;;;"}

package/dist/cjs/panel/PrimeScrollPanel.js

@@ -1,24 +1,39 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var scrollpanel = require('primereact/scrollpanel');
+var scrollarea = require('primereact/scrollarea');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:scrollPanel` component - a bounded region with themed scrollbars.
  *
- * A height is always applied: ScrollPanel with no bound grows to fit its content and never scrolls,
+ * A height is always applied: a scroll area with no bound grows to fit its content and never scrolls,
  * which looks like the component doing nothing at all.
  *
- * In PrimeReact 11 this component is renamed `ScrollArea`.
+ * PrimeReact 11 renamed `ScrollPanel` to `ScrollArea` and split it into parts. The viewport, the content
+ * wrapper and the scrollbar are all rendered here rather than by the component, because v11 renders no
+ * part it was not given - a `ScrollArea.Root` on its own clips nothing and shows no bar. Only the
+ * vertical scrollbar is composed in, matching the fixed-height-and-full-width shape this adapter imposes;
+ * the part hides itself when the content happens to fit, so it costs nothing when it is not needed. The
+ * abstract Scene name stays `scrollPanel` so existing screens keep resolving.
  */ function PrimeScrollPanel({ element, slots }) {
-    return /*#__PURE__*/ jsxRuntime.jsx(scrollpanel.ScrollPanel, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(scrollarea.ScrollArea.Root, {
         "data-scene-id": element.id,
         style: {
             height: `${properties.numberProperty(element, 'height', 200)}px`,
             width: '100%'
         },
-        children: slots.content
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(scrollarea.ScrollArea.Viewport, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(scrollarea.ScrollArea.Content, {
+                    children: slots.content
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(scrollarea.ScrollArea.Scrollbar, {
+                orientation: "vertical",
+                children: /*#__PURE__*/ jsxRuntime.jsx(scrollarea.ScrollArea.Handle, {})
+            })
+        ]
     });
 }
 

package/dist/cjs/panel/PrimeScrollPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeScrollPanel.js","sources":["../../../panel/PrimeScrollPanel.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 { ScrollPanel } from 'primereact/scrollpanel';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:scrollPanel` component - a bounded region with themed scrollbars.\n *\n * A height is always applied: ScrollPanel with no bound grows to fit its content and never scrolls,\n * which looks like the component doing nothing at all.\n *\n * In PrimeReact 11 this component is renamed `ScrollArea`.\n */\nexport function PrimeScrollPanel({ element, slots }: RegisteredComponentProps) {\n    return (\n        <ScrollPanel\n            data-scene-id={element.id}\n            style={{ height: `${numberProperty(element, 'height', 200)}px`, width: '100%' }}>\n            {slots.content}\n        </ScrollPanel>\n    );\n}\n"],"names":["PrimeScrollPanel","element","slots","_jsx","ScrollPanel","data-scene-id","id","style","height","numberProperty","width","content"],"mappings":";;;;;;AAOA;;;;;;;AAOC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACzE,IAAA,qBACIC,cAAA,CAACC,uBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeJ,QAAQK,EAAE;QACzBC,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQ,GAAGC,yBAAAA,CAAeR,OAAAA,EAAS,QAAA,EAAU,GAAA,CAAA,CAAK,EAAE,CAAC;YAAES,KAAAA,EAAO;AAAO,SAAA;AAC7ER,QAAAA,QAAAA,EAAAA,KAAAA,CAAMS;;AAGnB;;;;"}
+{"version":3,"file":"PrimeScrollPanel.js","sources":["../../../panel/PrimeScrollPanel.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 { ScrollArea } from 'primereact/scrollarea';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty } from '../properties';\n\n/**\n * The `PrimeReact:scrollPanel` component - a bounded region with themed scrollbars.\n *\n * A height is always applied: a scroll area with no bound grows to fit its content and never scrolls,\n * which looks like the component doing nothing at all.\n *\n * PrimeReact 11 renamed `ScrollPanel` to `ScrollArea` and split it into parts. The viewport, the content\n * wrapper and the scrollbar are all rendered here rather than by the component, because v11 renders no\n * part it was not given - a `ScrollArea.Root` on its own clips nothing and shows no bar. Only the\n * vertical scrollbar is composed in, matching the fixed-height-and-full-width shape this adapter imposes;\n * the part hides itself when the content happens to fit, so it costs nothing when it is not needed. The\n * abstract Scene name stays `scrollPanel` so existing screens keep resolving.\n */\nexport function PrimeScrollPanel({ element, slots }: RegisteredComponentProps) {\n    return (\n        <ScrollArea.Root data-scene-id={element.id} style={{ height: `${numberProperty(element, 'height', 200)}px`, width: '100%' }}>\n            <ScrollArea.Viewport>\n                <ScrollArea.Content>{slots.content}</ScrollArea.Content>\n            </ScrollArea.Viewport>\n            <ScrollArea.Scrollbar orientation='vertical'>\n                <ScrollArea.Handle />\n            </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n    );\n}\n"],"names":["PrimeScrollPanel","element","slots","_jsxs","ScrollArea","Root","data-scene-id","id","style","height","numberProperty","width","_jsx","Viewport","Content","content","Scrollbar","orientation","Handle"],"mappings":";;;;;;AAOA;;;;;;;;;;;;AAYC,IACM,SAASA,gBAAAA,CAAiB,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;IACzE,qBACIC,eAAA,CAACC,sBAAWC,IAAI,EAAA;AAACC,QAAAA,eAAAA,EAAeL,QAAQM,EAAE;QAAEC,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQ,GAAGC,yBAAAA,CAAeT,OAAAA,EAAS,QAAA,EAAU,GAAA,CAAA,CAAK,EAAE,CAAC;YAAEU,KAAAA,EAAO;AAAO,SAAA;;AACtH,0BAAAC,cAAA,CAACR,sBAAWS,QAAQ,EAAA;wCAChBD,cAAA,CAACR,sBAAWU,OAAO,EAAA;AAAEZ,oBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;;AAE/B,0BAAAH,cAAA,CAACR,sBAAWY,SAAS,EAAA;gBAACC,WAAAA,EAAY,UAAA;wCAC9BL,cAAA,CAACR,sBAAWc,MAAM,EAAA,EAAA;;;;AAIlC;;;;"}

package/dist/cjs/panel/PrimeSplitter.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var splitter = require('primereact/splitter');
 var properties = require('../properties.js');
 
@@ -9,21 +10,40 @@ var properties = require('../properties.js');
  *
  * One panel per child in the `content` slot, sized evenly. Splitter needs an explicit height because it
  * lays its panels out absolutely; without one the whole component collapses.
+ *
+ * PrimeReact 11 moved sizing off the individual panel and onto the root: a v10 `SplitterPanel size={50}`
+ * is now one entry in the root's `defaultSizes` array, so the even split is computed once up front rather
+ * than repeated per panel. It also stopped inserting the drag bars for you - `Splitter.Gutter` is a part
+ * the composition supplies between panels, and a splitter rendered without them is simply not resizable.
+ * `defaultSizes` is used rather than `sizes` so the component owns its sizes after the first drag; the
+ * controlled form would snap the panels back to the even split on every render.
+ *
+ * The Scene property keeps the name `layout` even though v11 calls the prop `orientation`, because a
+ * screen's property vocabulary is this package's contract with authored content.
  */ function PrimeSplitter({ element, slots }) {
     const panels = slots.content ?? [];
     const count = Math.max(panels.length, 2);
-    return /*#__PURE__*/ jsxRuntime.jsx(splitter.Splitter, {
+    return /*#__PURE__*/ jsxRuntime.jsx(splitter.Splitter.Root, {
         "data-scene-id": element.id,
-        layout: properties.stringProperty(element, 'layout', 'horizontal'),
+        orientation: properties.stringProperty(element, 'layout', 'horizontal'),
+        defaultSizes: Array.from({
+            length: count
+        }, ()=>100 / count),
         style: {
             height: `${properties.numberProperty(element, 'height', 200)}px`
         },
         children: Array.from({
             length: count
-        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsx(splitter.SplitterPanel, {
-                size: 100 / count,
-                className: "flex items-center justify-center",
-                children: panels[index]
+        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsxs(react.Fragment, {
+                children: [
+                    index > 0 && /*#__PURE__*/ jsxRuntime.jsx(splitter.Splitter.Gutter, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(splitter.Splitter.Handle, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(splitter.Splitter.Panel, {
+                        className: "flex items-center justify-center",
+                        children: panels[index]
+                    })
+                ]
             }, index))
     });
 }

package/dist/cjs/panel/PrimeSplitter.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimeSplitter.js","sources":["../../../panel/PrimeSplitter.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 { Splitter, SplitterPanel } from 'primereact/splitter';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:splitter` component - regions separated by a bar the user can drag.\n *\n * One panel per child in the `content` slot, sized evenly. Splitter needs an explicit height because it\n * lays its panels out absolutely; without one the whole component collapses.\n */\nexport function PrimeSplitter({ element, slots }: RegisteredComponentProps) {\n    const panels = slots.content ?? [];\n    const count = Math.max(panels.length, 2);\n    return (\n        <Splitter\n            data-scene-id={element.id}\n            layout={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}\n            style={{ height: `${numberProperty(element, 'height', 200)}px` }}>\n            {Array.from({ length: count }, (_, index) => (\n                <SplitterPanel key={index} size={100 / count} className='flex items-center justify-center'>\n                    {panels[index]}\n                </SplitterPanel>\n            ))}\n        </Splitter>\n    );\n}\n"],"names":["PrimeSplitter","element","slots","panels","content","count","Math","max","length","_jsx","Splitter","data-scene-id","id","layout","stringProperty","style","height","numberProperty","Array","from","_","index","SplitterPanel","size","className"],"mappings":";;;;;;AAOA;;;;;AAKC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACtE,IAAA,MAAMC,MAAAA,GAASD,KAAAA,CAAME,OAAO,IAAI,EAAE;AAClC,IAAA,MAAMC,QAAQC,IAAAA,CAAKC,GAAG,CAACJ,MAAAA,CAAOK,MAAM,EAAE,CAAA,CAAA;AACtC,IAAA,qBACIC,cAAA,CAACC,iBAAAA,EAAAA;AACGC,QAAAA,eAAAA,EAAeV,QAAQW,EAAE;QACzBC,MAAAA,EAAQC,yBAAAA,CAAeb,SAAS,QAAA,EAAU,YAAA,CAAA;QAC1Cc,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQ,GAAGC,yBAAAA,CAAehB,OAAAA,EAAS,QAAA,EAAU,GAAA,CAAA,CAAK,EAAE;AAAE,SAAA;AAC9DiB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAC;YAAEX,MAAAA,EAAQH;SAAM,EAAG,CAACe,CAAAA,EAAGC,KAAAA,iBAC/BZ,cAAA,CAACa,sBAAAA,EAAAA;AAA0BC,gBAAAA,IAAAA,EAAM,GAAA,GAAMlB,KAAAA;gBAAOmB,SAAAA,EAAU,kCAAA;AACnDrB,gBAAAA,QAAAA,EAAAA,MAAM,CAACkB,KAAAA;AADQA,aAAAA,EAAAA,KAAAA,CAAAA;;AAMpC;;;;"}
+{"version":3,"file":"PrimeSplitter.js","sources":["../../../panel/PrimeSplitter.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Fragment } from 'react';\nimport { Splitter } from 'primereact/splitter';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { numberProperty, stringProperty } from '../properties';\n\n/**\n * The `PrimeReact:splitter` component - regions separated by a bar the user can drag.\n *\n * One panel per child in the `content` slot, sized evenly. Splitter needs an explicit height because it\n * lays its panels out absolutely; without one the whole component collapses.\n *\n * PrimeReact 11 moved sizing off the individual panel and onto the root: a v10 `SplitterPanel size={50}`\n * is now one entry in the root's `defaultSizes` array, so the even split is computed once up front rather\n * than repeated per panel. It also stopped inserting the drag bars for you - `Splitter.Gutter` is a part\n * the composition supplies between panels, and a splitter rendered without them is simply not resizable.\n * `defaultSizes` is used rather than `sizes` so the component owns its sizes after the first drag; the\n * controlled form would snap the panels back to the even split on every render.\n *\n * The Scene property keeps the name `layout` even though v11 calls the prop `orientation`, because a\n * screen's property vocabulary is this package's contract with authored content.\n */\nexport function PrimeSplitter({ element, slots }: RegisteredComponentProps) {\n    const panels = slots.content ?? [];\n    const count = Math.max(panels.length, 2);\n    return (\n        <Splitter.Root\n            data-scene-id={element.id}\n            orientation={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}\n            defaultSizes={Array.from({ length: count }, () => 100 / count)}\n            style={{ height: `${numberProperty(element, 'height', 200)}px` }}>\n            {Array.from({ length: count }, (_, index) => (\n                <Fragment key={index}>\n                    {index > 0 && (\n                        <Splitter.Gutter>\n                            <Splitter.Handle />\n                        </Splitter.Gutter>\n                    )}\n                    <Splitter.Panel className='flex items-center justify-center'>{panels[index]}</Splitter.Panel>\n                </Fragment>\n            ))}\n        </Splitter.Root>\n    );\n}\n"],"names":["PrimeSplitter","element","slots","panels","content","count","Math","max","length","_jsx","Splitter","Root","data-scene-id","id","orientation","stringProperty","defaultSizes","Array","from","style","height","numberProperty","_","index","_jsxs","Fragment","Gutter","Handle","Panel","className"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;AAeC,IACM,SAASA,aAAAA,CAAc,EAAEC,OAAO,EAAEC,KAAK,EAA4B,EAAA;AACtE,IAAA,MAAMC,MAAAA,GAASD,KAAAA,CAAME,OAAO,IAAI,EAAE;AAClC,IAAA,MAAMC,QAAQC,IAAAA,CAAKC,GAAG,CAACJ,MAAAA,CAAOK,MAAM,EAAE,CAAA,CAAA;IACtC,qBACIC,cAAA,CAACC,kBAASC,IAAI,EAAA;AACVC,QAAAA,eAAAA,EAAeX,QAAQY,EAAE;QACzBC,WAAAA,EAAaC,yBAAAA,CAAed,SAAS,QAAA,EAAU,YAAA,CAAA;QAC/Ce,YAAAA,EAAcC,KAAAA,CAAMC,IAAI,CAAC;YAAEV,MAAAA,EAAQH;AAAM,SAAA,EAAG,IAAM,GAAA,GAAMA,KAAAA,CAAAA;QACxDc,KAAAA,EAAO;AAAEC,YAAAA,MAAAA,EAAQ,GAAGC,yBAAAA,CAAepB,OAAAA,EAAS,QAAA,EAAU,GAAA,CAAA,CAAK,EAAE;AAAE,SAAA;AAC9DgB,QAAAA,QAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAC;YAAEV,MAAAA,EAAQH;SAAM,EAAG,CAACiB,CAAAA,EAAGC,KAAAA,iBAC/BC,eAAA,CAACC,cAAAA,EAAAA;;oBACIF,KAAAA,GAAQ,CAAA,kBACLd,cAAA,CAACC,iBAAAA,CAASgB,MAAM,EAAA;gDACZjB,cAAA,CAACC,kBAASiB,MAAM,EAAA,EAAA;;AAGxB,kCAAAlB,cAAA,CAACC,kBAASkB,KAAK,EAAA;wBAACC,SAAAA,EAAU,kCAAA;AAAoC1B,wBAAAA,QAAAA,EAAAA,MAAM,CAACoB,KAAAA;;;AAN1DA,aAAAA,EAAAA,KAAAA,CAAAA;;AAW/B;;;;"}

package/dist/cjs/panel/PrimeStepper.js

@@ -4,50 +4,92 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('primereact/button');
 var stepper = require('primereact/stepper');
-var stepperpanel = require('primereact/stepperpanel');
 var properties = require('../properties.js');
 
 /**
  * The `PrimeReact:stepper` component - a wizard whose progress is shown as numbered steps.
  *
- * Stepper advances only when something calls `nextCallback` / `prevCallback` on its ref, so the adapter
- * renders the Back and Next buttons itself. Without them the steps render but nothing can move between
- * them, which is a stepper that does not step.
+ * The adapter renders the Back and Next buttons itself. Without them the steps render but nothing can
+ * move between them, which is a stepper that does not step.
+ *
+ * The reason changed with PrimeReact 11 even though the conclusion did not. In v10 the component owned
+ * the active step and exposed `nextCallback` / `prevCallback` on a ref for someone else to call; v11 is
+ * headless and owns nothing - the active step is `value` on `Stepper.Root`, so the adapter holds it in
+ * state and the buttons set it. That also makes the step headers work: clicking one arrives as
+ * `onValueChange`, which is routed into the same state rather than being handled separately.
+ *
+ * v11 also merged `primereact/stepperpanel` into `primereact/stepper`, splitting each step into a
+ * `Stepper.Step` in the header list and a matching `Stepper.Panel` in the body, joined by value.
+ *
+ * **Dropped:** v10's `orientation` property has no equivalent - v11's headless stepper lays out
+ * horizontally and leaves a vertical arrangement to CSS. The authored value is still forwarded as a
+ * `data-orientation` attribute so a theme can act on it, but nothing in the component reads it.
  */ function PrimeStepper({ element, slots }) {
-    const stepper$1 = react.useRef(null);
     const headers = properties.stringArrayProperty(element, 'headers');
     const bodies = slots.content ?? [];
     const count = Math.max(headers.length, bodies.length);
-    return /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper, {
-        ref: stepper$1,
+    const [activeStep, setActiveStep] = react.useState(0);
+    // A screen can shrink its step list between renders, which would leave the active step pointing past
+    // the end and show no panel at all. Clamping keeps the value inside the set of steps that exist.
+    const current = Math.min(activeStep, Math.max(count - 1, 0));
+    return /*#__PURE__*/ jsxRuntime.jsxs(stepper.Stepper.Root, {
         "data-scene-id": element.id,
+        "data-orientation": properties.stringProperty(element, 'orientation', 'horizontal'),
+        value: String(current),
         linear: properties.booleanProperty(element, 'linear', false),
-        orientation: properties.stringProperty(element, 'orientation', 'horizontal'),
-        children: Array.from({
-            length: count
-        }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsx(stepperpanel.StepperPanel, {
-                header: headers[index] ?? `Step ${index + 1}`,
-                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    className: "flex flex-col gap-4",
-                    children: [
-                        bodies[index],
-                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "flex gap-2",
+        onValueChange: (event)=>{
+            const selected = Number(event.value);
+            if (!Number.isNaN(selected)) setActiveStep(selected);
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.List, {
+                children: Array.from({
+                    length: count
+                }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsxs(stepper.Stepper.Step, {
+                        value: String(index),
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(stepper.Stepper.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.Number, {
+                                        children: index + 1
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.Title, {
+                                        children: headers[index] ?? `Step ${index + 1}`
+                                    })
+                                ]
+                            }),
+                            index < count - 1 && /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.Separator, {})
+                        ]
+                    }, index))
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.Panels, {
+                children: Array.from({
+                    length: count
+                }, (_, index)=>/*#__PURE__*/ jsxRuntime.jsx(stepper.Stepper.Panel, {
+                        value: String(index),
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "flex flex-col gap-4",
                             children: [
-                                index > 0 && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                                    label: "Back",
-                                    severity: "secondary",
-                                    onClick: ()=>stepper$1.current?.prevCallback()
-                                }),
-                                index < count - 1 && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
-                                    label: "Next",
-                                    onClick: ()=>stepper$1.current?.nextCallback()
+                                bodies[index],
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex gap-2",
+                                    children: [
+                                        index > 0 && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                                            severity: "secondary",
+                                            onClick: ()=>setActiveStep(index - 1),
+                                            children: "Back"
+                                        }),
+                                        index < count - 1 && /*#__PURE__*/ jsxRuntime.jsx(button.Button, {
+                                            onClick: ()=>setActiveStep(index + 1),
+                                            children: "Next"
+                                        })
+                                    ]
                                 })
                             ]
                         })
-                    ]
-                })
-            }, index))
+                    }, index))
+            })
+        ]
     });
 }