@cratis/scene.primereact 0.1.0

package/overlay/PrimeConfirmDialog.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Button } from 'primereact/button';
+import { ConfirmDialog } from 'primereact/confirmdialog';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:confirmDialog` component - a yes/no question before a consequential action.
+ *
+ * Uses ConfirmDialog's declarative form rather than the imperative `confirmDialog()` call, because the
+ * imperative one needs a caller and a Scene element is configuration, not a caller. Visibility is owned
+ * locally for the reason described on {@link PrimeDialog}.
+ *
+ * In PrimeReact 11 the sibling `ConfirmPopup` is removed; `ConfirmDialog` remains.
+ */
+export function PrimeConfirmDialog({ element }: RegisteredComponentProps) {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div data-scene-id={element.id}>
+            <Button
+                label={stringProperty(element, 'triggerLabel', 'Confirm')}
+                severity={stringProperty(element, 'severity', 'danger') as 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help'}
+                onClick={() => setVisible(true)}
+            />
+            <ConfirmDialog
+                visible={visible}
+                onHide={() => setVisible(false)}
+                header={stringProperty(element, 'header', 'Are you sure?')}
+                message={stringProperty(element, 'message', 'This action cannot be undone.')}
+                icon={stringProperty(element, 'icon', 'pi pi-exclamation-triangle')}
+                acceptLabel={stringProperty(element, 'acceptLabel', 'Yes')}
+                rejectLabel={stringProperty(element, 'rejectLabel', 'No')}
+            />
+        </div>
+    );
+}

package/overlay/PrimeDialog.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:dialog` component - a modal window.
+ *
+ * A dialog is only ever interesting while it is open, and "the user closed it" is state a Scene element
+ * has no place to record. The adapter therefore owns visibility locally, seeded from the `visible`
+ * property, and always renders a trigger button beside it. That keeps a dialog reachable again after it
+ * is dismissed - without the trigger, closing a previewed dialog would leave a permanently blank spot on
+ * the screen with no way back.
+ */
+export function PrimeDialog({ element, slots }: RegisteredComponentProps) {
+    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));
+    const header = stringProperty(element, 'header', 'Dialog');
+    return (
+        <div data-scene-id={element.id}>
+            <Button label={stringProperty(element, 'triggerLabel', header)} onClick={() => setVisible(true)} />
+            <Dialog
+                header={header}
+                visible={visible}
+                onHide={() => setVisible(false)}
+                modal={booleanProperty(element, 'modal', true)}
+                draggable={booleanProperty(element, 'draggable', false)}
+                style={{ width: stringProperty(element, 'width', '32rem') }}>
+                {slots.content}
+            </Dialog>
+        </div>
+    );
+}

package/overlay/PrimeOverlayPanel.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:overlayPanel` component - content revealed next to whatever opened it.
+ *
+ * OverlayPanel positions itself against the event that toggled it, so it is meaningless without a
+ * trigger; the adapter renders one and wires `toggle` to it.
+ *
+ * In PrimeReact 11 this component is renamed `Popover`.
+ */
+export function PrimeOverlayPanel({ element, slots }: RegisteredComponentProps) {
+    const overlay = useRef<OverlayPanel>(null);
+    return (
+        <div data-scene-id={element.id}>
+            <Button label={stringProperty(element, 'triggerLabel', 'Show')} onClick={(event) => overlay.current?.toggle(event)} />
+            <OverlayPanel ref={overlay}>{slots.content}</OverlayPanel>
+        </div>
+    );
+}

package/overlay/PrimeSidebar.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState } from 'react';
+import { Button } from 'primereact/button';
+import { Sidebar } from 'primereact/sidebar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:sidebar` component - a panel that slides in from an edge of the viewport.
+ *
+ * Worth knowing before a PrimeReact 11 port: v11 renames this component to `Drawer` *and* introduces an
+ * unrelated new component called `Sidebar` for application-shell navigation. A port that follows the
+ * name rather than the behavior silently swaps a slide-in overlay for a static shell element.
+ */
+export function PrimeSidebar({ element, slots }: RegisteredComponentProps) {
+    const [visible, setVisible] = useState(booleanProperty(element, 'visible', false));
+    return (
+        <div data-scene-id={element.id}>
+            <Button label={stringProperty(element, 'triggerLabel', 'Open')} onClick={() => setVisible(true)} />
+            <Sidebar
+                visible={visible}
+                onHide={() => setVisible(false)}
+                position={stringProperty(element, 'position', 'left') as 'left' | 'right' | 'top' | 'bottom'}
+                fullScreen={booleanProperty(element, 'fullScreen', false)}>
+                {slots.content}
+            </Sidebar>
+        </div>
+    );
+}

package/overlay/PrimeTooltip.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Tooltip } from 'primereact/tooltip';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:tooltip` component - explanatory text shown on hover.
+ *
+ * Tooltip attaches itself to a CSS selector rather than wrapping anything, so the adapter renders the
+ * hover target too and points the tooltip at it with a `data-` attribute selector. An attribute selector
+ * is used rather than a class because a Scene element id is free-form and may legally start with a digit,
+ * which is not a valid class selector.
+ */
+export function PrimeTooltip({ element, slots }: RegisteredComponentProps) {
+    const target = `[data-scene-tooltip-target="${element.id}"]`;
+    return (
+        <>
+            <Tooltip target={target} position={stringProperty(element, 'position', 'top') as 'top' | 'bottom' | 'left' | 'right'} />
+            <span data-scene-id={element.id} data-scene-tooltip-target={element.id} data-pr-tooltip={stringProperty(element, 'text', '')}>
+                {slots.content?.length ? slots.content : stringProperty(element, 'label', 'Hover me')}
+            </span>
+        </>
+    );
+}

package/overlay/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PrimeDialog';
+export * from './PrimeConfirmDialog';
+export * from './PrimeOverlayPanel';
+export * from './PrimeSidebar';
+export * from './PrimeTooltip';

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@cratis/scene.primereact",
+    "version": "0.1.0",
+    "description": "The PrimeReact component package: maps Scene's abstract component names onto real PrimeReact components, and PrimeReact's free themes onto Scene themes.",
+    "author": "Cratis",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Cratis/Scene.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist",
+        "**/*.ts",
+        "**/*.tsx",
+        "**/*.css"
+    ],
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/esm/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/esm/index.d.ts",
+            "require": "./dist/cjs/index.js",
+            "import": "./dist/esm/index.js"
+        },
+        "./primeReactTheme.css": "./primeReactTheme.css"
+    },
+    "scripts": {
+        "prepare": "yarn g:build",
+        "clean": "yarn g:clean",
+        "build": "yarn g:build",
+        "lint": "yarn g:lint",
+        "lint:ci": "yarn g:lint:ci",
+        "test": "yarn g:test",
+        "ci": "yarn g:ci",
+        "up": "yarn g:up",
+        "dev": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "dependencies": {
+        "@cratis/scene.engine": "0.1.0",
+        "@cratis/scene.model": "0.1.0",
+        "@cratis/scene.react": "0.1.0"
+    },
+    "devDependencies": {
+        "@cratis/scene.engine": "0.1.0",
+        "@cratis/scene.model": "0.1.0",
+        "@cratis/scene.react": "0.1.0",
+        "@storybook/addon-links": "^10.4.1",
+        "@storybook/react": "^10.4.1",
+        "@storybook/react-vite": "^10.4.1",
+        "primeicons": "^7.0.0",
+        "primereact": "10.9.8",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "storybook": "^10.4.1"
+    },
+    "peerDependencies": {
+        "primeicons": "^7.0.0",
+        "primereact": "^10.9.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    }
+}

package/panel/PanelGallery.stories.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { SceneElementView } from '@cratis/scene.react';
+import { primeReactComponents } from '../primeReactComponents';
+import { sceneComponent, sceneGallery } from '../storyElements';
+
+const meta = {
+    title: 'PrimeReact/Panel',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The panel family. `accordion`, `tabView`, `splitter` and `stepper` pair a headers property with the content slot by position, because PrimeReact identifies their sections by React element type and a Scene adapter wrapping one would not be recognized.' } },
+    },
+} satisfies Meta<typeof SceneElementView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Every component in this family, rendered through the real registry by the real renderer. */
+export const Gallery: Story = {
+    args: {
+        element: sceneGallery('gallery', [
+            sceneComponent('card', 'card', { title: 'Project', subtitle: 'Acme' }, { content: [sceneComponent('cardText', 'text', { text: 'Card body' })] }),
+            sceneComponent('panel', 'panel', { header: 'Details', toggleable: true }, { content: [sceneComponent('panelText', 'text', { text: 'Panel body' })] }),
+            sceneComponent('fieldset', 'fieldset', { legend: 'Address' }, { content: [sceneComponent('fieldsetText', 'text', { text: 'Fieldset body' })] }),
+            sceneComponent('divider', 'divider', { label: 'or' }),
+            sceneComponent('scrollPanel', 'scrollPanel', { height: 120 }, { content: [sceneComponent('scrollText', 'text', { text: 'Scrollable content' })] }),
+            sceneComponent(
+                'toolbar',
+                'toolbar',
+                {},
+                { start: [sceneComponent('toolbarNew', 'button', { label: 'New' })], end: [sceneComponent('toolbarHelp', 'button', { label: 'Help', outlined: true })] }
+            ),
+            sceneComponent(
+                'accordion',
+                'accordion',
+                { headers: ['Overview', 'History'] },
+                { content: [sceneComponent('accOne', 'text', { text: 'Overview body' }), sceneComponent('accTwo', 'text', { text: 'History body' })] }
+            ),
+            sceneComponent(
+                'tabView',
+                'tabView',
+                { headers: ['Summary', 'Activity'] },
+                { content: [sceneComponent('tabOne', 'text', { text: 'Summary body' }), sceneComponent('tabTwo', 'text', { text: 'Activity body' })] }
+            ),
+            sceneComponent(
+                'splitter',
+                'splitter',
+                { height: 140 },
+                { content: [sceneComponent('splitOne', 'text', { text: 'Left' }), sceneComponent('splitTwo', 'text', { text: 'Right' })] }
+            ),
+            sceneComponent(
+                'stepper',
+                'stepper',
+                { headers: ['Account', 'Payment'] },
+                { content: [sceneComponent('stepOne', 'text', { text: 'Account details' }), sceneComponent('stepTwo', 'text', { text: 'Payment details' })] }
+            ),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/panel/PrimeAccordion.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringArrayProperty } from '../properties';
+
+/**
+ * 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.
+ */
+export function PrimeAccordion({ element, slots }: RegisteredComponentProps) {
+    const headers = stringArrayProperty(element, 'headers');
+    const bodies = slots.content ?? [];
+    const count = Math.max(headers.length, bodies.length);
+    return (
+        <Accordion data-scene-id={element.id} activeIndex={numberProperty(element, 'activeIndex', 0)}>
+            {Array.from({ length: count }, (_, index) => (
+                <AccordionTab key={index} header={headers[index] ?? `Section ${index + 1}`}>
+                    {bodies[index]}
+                </AccordionTab>
+            ))}
+        </Accordion>
+    );
+}

package/panel/PrimeCard.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Card } from 'primereact/card';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:card` component.
+ *
+ * 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.
+ */
+export function PrimeCard({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Card data-scene-id={element.id} title={stringProperty(element, 'title')} subTitle={stringProperty(element, 'subtitle')}>
+            {slots.content}
+        </Card>
+    );
+}

package/panel/PrimeDivider.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Divider } from 'primereact/divider';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:divider` component - a rule separating content, optionally with a caption in it.
+ */
+export function PrimeDivider({ element }: RegisteredComponentProps) {
+    const label = stringProperty(element, 'label');
+    return (
+        <Divider
+            data-scene-id={element.id}
+            layout={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}
+            align={stringProperty(element, 'align') as 'center' | 'left' | 'right' | 'top' | 'bottom' | undefined}
+            type={stringProperty(element, 'type', 'solid') as 'solid' | 'dashed' | 'dotted'}>
+            {label}
+        </Divider>
+    );
+}

package/panel/PrimeFieldset.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Fieldset } from 'primereact/fieldset';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:fieldset` component - a container whose legend sits on its border.
+ */
+export function PrimeFieldset({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Fieldset data-scene-id={element.id} legend={stringProperty(element, 'legend')} toggleable={booleanProperty(element, 'toggleable', false)}>
+            {slots.content}
+        </Fieldset>
+    );
+}

package/panel/PrimePanel.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Panel } from 'primereact/panel';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:panel` component - a titled container that can optionally collapse.
+ */
+export function PrimePanel({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Panel
+            data-scene-id={element.id}
+            header={stringProperty(element, 'header')}
+            toggleable={booleanProperty(element, 'toggleable', false)}
+            collapsed={booleanProperty(element, 'collapsed', false)}>
+            {slots.content}
+        </Panel>
+    );
+}

package/panel/PrimeScrollPanel.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScrollPanel } from 'primereact/scrollpanel';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty } from '../properties';
+
+/**
+ * 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,
+ * which looks like the component doing nothing at all.
+ *
+ * In PrimeReact 11 this component is renamed `ScrollArea`.
+ */
+export function PrimeScrollPanel({ element, slots }: RegisteredComponentProps) {
+    return (
+        <ScrollPanel
+            data-scene-id={element.id}
+            style={{ height: `${numberProperty(element, 'height', 200)}px`, width: '100%' }}>
+            {slots.content}
+        </ScrollPanel>
+    );
+}

package/panel/PrimeSplitter.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:splitter` component - regions separated by a bar the user can drag.
+ *
+ * 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.
+ */
+export function PrimeSplitter({ element, slots }: RegisteredComponentProps) {
+    const panels = slots.content ?? [];
+    const count = Math.max(panels.length, 2);
+    return (
+        <Splitter
+            data-scene-id={element.id}
+            layout={stringProperty(element, 'layout', 'horizontal') as 'horizontal' | 'vertical'}
+            style={{ height: `${numberProperty(element, 'height', 200)}px` }}>
+            {Array.from({ length: count }, (_, index) => (
+                <SplitterPanel key={index} size={100 / count} className='flex items-center justify-center'>
+                    {panels[index]}
+                </SplitterPanel>
+            ))}
+        </Splitter>
+    );
+}

package/panel/PrimeStepper.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringArrayProperty, stringProperty } from '../properties';
+
+/**
+ * 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.
+ */
+export function PrimeStepper({ element, slots }: RegisteredComponentProps) {
+    const stepper = useRef<Stepper>(null);
+    const headers = stringArrayProperty(element, 'headers');
+    const bodies = slots.content ?? [];
+    const count = Math.max(headers.length, bodies.length);
+    return (
+        <Stepper
+            ref={stepper}
+            data-scene-id={element.id}
+            linear={booleanProperty(element, 'linear', false)}
+            orientation={stringProperty(element, 'orientation', 'horizontal') as 'horizontal' | 'vertical'}>
+            {Array.from({ length: count }, (_, index) => (
+                <StepperPanel key={index} header={headers[index] ?? `Step ${index + 1}`}>
+                    <div className='flex flex-col gap-4'>
+                        {bodies[index]}
+                        <div className='flex gap-2'>
+                            {index > 0 && <Button label='Back' severity='secondary' onClick={() => stepper.current?.prevCallback()} />}
+                            {index < count - 1 && <Button label='Next' onClick={() => stepper.current?.nextCallback()} />}
+                        </div>
+                    </div>
+                </StepperPanel>
+            ))}
+        </Stepper>
+    );
+}

package/panel/PrimeTabView.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { TabPanel, TabView } from 'primereact/tabview';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringArrayProperty } from '../properties';
+
+/**
+ * The `PrimeReact:tabView` component - content behind selectable tabs.
+ *
+ * Pairs a `headers` property with the `content` slot by position, for the same reason
+ * {@link PrimeAccordion} does.
+ *
+ * In PrimeReact 11 `TabView` and `TabPanel` are replaced by a single `Tabs` component.
+ */
+export function PrimeTabView({ element, slots }: RegisteredComponentProps) {
+    const headers = stringArrayProperty(element, 'headers');
+    const bodies = slots.content ?? [];
+    const count = Math.max(headers.length, bodies.length);
+    return (
+        <TabView data-scene-id={element.id} activeIndex={numberProperty(element, 'activeIndex', 0)}>
+            {Array.from({ length: count }, (_, index) => (
+                <TabPanel key={index} header={headers[index] ?? `Tab ${index + 1}`}>
+                    {bodies[index]}
+                </TabPanel>
+            ))}
+        </TabView>
+    );
+}

package/panel/PrimeToolbar.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Toolbar } from 'primereact/toolbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+
+/**
+ * The `PrimeReact:toolbar` component - a bar with content anchored to its start, center and end.
+ *
+ * The three regions map onto three named slots rather than properties, because what goes into them is
+ * other components - buttons, a search field, a menu - not values.
+ */
+export function PrimeToolbar({ element, slots }: RegisteredComponentProps) {
+    return <Toolbar data-scene-id={element.id} start={slots.start} center={slots.center} end={slots.end ?? slots.content} />;
+}

package/panel/index.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PrimeCard';
+export * from './PrimePanel';
+export * from './PrimeFieldset';
+export * from './PrimeDivider';
+export * from './PrimeScrollPanel';
+export * from './PrimeToolbar';
+export * from './PrimeAccordion';
+export * from './PrimeTabView';
+export * from './PrimeSplitter';
+export * from './PrimeStepper';