@cratis/scene.primereact 0.1.0

package/form/PrimeListBox.tsx

@@ -0,0 +1,30 @@
+// 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 { ListBox } from 'primereact/listbox';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:listBox` component - an always-visible list of choices.
+ *
+ * The alternative to a dropdown when the choices matter enough to stay on screen; `multiple` switches it
+ * between one and many.
+ */
+export function PrimeListBox({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
+    return (
+        <ListBox
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            options={optionsProperty(element, 'options')}
+            optionLabel='label'
+            optionValue='value'
+            multiple={booleanProperty(element, 'multiple', false)}
+            filter={booleanProperty(element, 'filter', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeMultiSelect.tsx

@@ -0,0 +1,28 @@
+// 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 { MultiSelect } from 'primereact/multiselect';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:multiSelect` component - a multiple-choice select with a checkbox list.
+ */
+export function PrimeMultiSelect({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<string[]>(stringArrayProperty(element, 'value'));
+    return (
+        <MultiSelect
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            options={optionsProperty(element, 'options')}
+            optionLabel='label'
+            optionValue='value'
+            display={stringProperty(element, 'display', 'comma') as 'comma' | 'chip'}
+            placeholder={stringProperty(element, 'placeholder', 'Select')}
+            filter={booleanProperty(element, 'filter', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimePassword.tsx

@@ -0,0 +1,25 @@
+// 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 { Password } from 'primereact/password';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:password` component - a masked field with an optional strength meter.
+ */
+export function PrimePassword({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(stringProperty(element, 'value', ''));
+    return (
+        <Password
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            feedback={booleanProperty(element, 'feedback', true)}
+            toggleMask={booleanProperty(element, 'toggleMask', true)}
+            placeholder={stringProperty(element, 'placeholder')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeRadioButton.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 { RadioButton } from 'primereact/radiobutton';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:radioButton` component - one exclusive choice out of several.
+ *
+ * PrimeReact's RadioButton is a single button, but a lone radio button is never what a screen means: the
+ * choice is the group. The adapter therefore renders the whole group from `options`, sharing one
+ * `name` so the browser enforces exclusivity, and falls back to a single button when only a `label` was
+ * given.
+ */
+export function PrimeRadioButton({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
+    const options = optionsProperty(element, 'options');
+    const choices = options.length > 0 ? options : [{ label: stringProperty(element, 'label', 'Option'), value: element.id }];
+    const disabled = booleanProperty(element, 'disabled', false);
+    return (
+        <div data-scene-id={element.id} className='flex flex-col gap-2'>
+            {choices.map((choice) => (
+                <div key={choice.value} className='flex items-center gap-2'>
+                    <RadioButton
+                        inputId={`${element.id}-${choice.value}`}
+                        name={element.id}
+                        value={choice.value}
+                        checked={value === choice.value}
+                        onChange={(event) => setValue(event.value)}
+                        disabled={disabled}
+                    />
+                    <label htmlFor={`${element.id}-${choice.value}`}>{choice.label}</label>
+                </div>
+            ))}
+        </div>
+    );
+}

package/form/PrimeRating.tsx

@@ -0,0 +1,25 @@
+// 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 { Rating } from 'primereact/rating';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:rating` component - a star rating.
+ */
+export function PrimeRating({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<number | undefined>(numberProperty(element, 'value'));
+    return (
+        <Rating
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(typeof event.value === 'number' ? event.value : undefined)}
+            stars={numberProperty(element, 'stars', 5)}
+            cancel={booleanProperty(element, 'cancel', true)}
+            readOnly={booleanProperty(element, 'readOnly', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeSelectButton.tsx

@@ -0,0 +1,28 @@
+// 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 { SelectButton } from 'primereact/selectbutton';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, optionsProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:selectButton` component - a small set of choices shown as joined toggle buttons.
+ *
+ * In PrimeReact 11 this component is renamed `ToggleButtonGroup`.
+ */
+export function PrimeSelectButton({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<unknown>(stringProperty(element, 'value'));
+    return (
+        <SelectButton
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(event.value)}
+            options={optionsProperty(element, 'options')}
+            optionLabel='label'
+            optionValue='value'
+            multiple={booleanProperty(element, 'multiple', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/PrimeSlider.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 { useState } from 'react';
+import { Slider } from 'primereact/slider';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:slider` component - a value picked along a track.
+ *
+ * Given a width because Slider renders as a zero-height track that collapses to nothing in an
+ * auto-sized container - the one piece of layout it cannot supply for itself.
+ */
+export function PrimeSlider({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState(numberProperty(element, 'value', 50));
+    return (
+        <div data-scene-id={element.id} className='w-64'>
+            <Slider
+                value={value}
+                onChange={(event) => setValue(typeof event.value === 'number' ? event.value : value)}
+                min={numberProperty(element, 'min', 0)}
+                max={numberProperty(element, 'max', 100)}
+                step={numberProperty(element, 'step', 1)}
+                disabled={booleanProperty(element, 'disabled', false)}
+            />
+        </div>
+    );
+}

package/form/PrimeToggleSwitch.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 { InputSwitch } from 'primereact/inputswitch';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:toggleSwitch` component.
+ *
+ * The abstract name is `toggleSwitch` while PrimeReact 10 calls the component `InputSwitch` - the Scene
+ * name follows what the thing is rather than what one library happens to call it this major version.
+ * PrimeReact 11 renames it `ToggleSwitch`, so the abstract name already matches where the library is
+ * going and the port changes only this file's import.
+ */
+export function PrimeToggleSwitch({ element }: RegisteredComponentProps) {
+    const [checked, setChecked] = useState(booleanProperty(element, 'checked', false));
+    const label = stringProperty(element, 'label');
+    return (
+        <div data-scene-id={element.id} className='flex items-center gap-2'>
+            <InputSwitch
+                inputId={element.id}
+                checked={checked}
+                onChange={(event) => setChecked(event.value)}
+                disabled={booleanProperty(element, 'disabled', false)}
+            />
+            {label !== undefined && <label htmlFor={element.id}>{label}</label>}
+        </div>
+    );
+}

package/form/PrimeTreeSelect.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 { useState } from 'react';
+import { TreeSelect } from 'primereact/treeselect';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+import { treeNodesProperty } from '../treeNodes';
+
+/**
+ * The `PrimeReact:treeSelect` component - a dropdown whose choices are a hierarchy.
+ */
+export function PrimeTreeSelect({ element }: RegisteredComponentProps) {
+    const [value, setValue] = useState<string | undefined>(stringProperty(element, 'value'));
+    return (
+        <TreeSelect
+            data-scene-id={element.id}
+            value={value}
+            onChange={(event) => setValue(typeof event.value === 'string' ? event.value : undefined)}
+            options={treeNodesProperty(element, 'options')}
+            placeholder={stringProperty(element, 'placeholder', 'Select')}
+            filter={booleanProperty(element, 'filter', false)}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/form/index.ts

@@ -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.
+
+export * from './PrimeInputText';
+export * from './PrimeInputTextarea';
+export * from './PrimeInputNumber';
+export * from './PrimePassword';
+export * from './PrimeInputMask';
+export * from './PrimeFloatLabel';
+export * from './PrimeIconField';
+export * from './PrimeDropdown';
+export * from './PrimeMultiSelect';
+export * from './PrimeListBox';
+export * from './PrimeSelectButton';
+export * from './PrimeCheckbox';
+export * from './PrimeRadioButton';
+export * from './PrimeToggleSwitch';
+export * from './PrimeSlider';
+export * from './PrimeRating';
+export * from './PrimeKnob';
+export * from './PrimeCalendar';
+export * from './PrimeColorPicker';
+export * from './PrimeChips';
+export * from './PrimeAutoComplete';
+export * from './PrimeTreeSelect';
+export * from './PrimeCascadeSelect';

package/index.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './SelectOption';
+export * from './properties';
+export * from './menuItems';
+export * from './treeNodes';
+export * from './button';
+export * from './form';
+export * from './data';
+export * from './panel';
+export * from './overlay';
+export * from './menu';
+export * from './messages';
+export * from './media';
+export * from './misc';
+export * from './screen';
+export * from './theme';
+export * from './primeReactComponents';
+export * from './primeReactPackage';

package/media/MediaGallery.stories.tsx

@@ -0,0 +1,47 @@
+// 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/Media',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The media family. `galleria` and `carousel` both ship without a default template, so each adapter supplies one built from the fields the element names.' } },
+    },
+} 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('image', 'image', { src: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg', alt: 'A landscape', width: '200', preview: true }),
+            sceneComponent('galleria', 'galleria', {
+                maxWidth: 320,
+                items: [
+                    { src: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg', alt: 'One' },
+                    { src: 'https://primefaces.org/cdn/primereact/images/galleria/galleria2.jpg', alt: 'Two' },
+                ],
+            }),
+            sceneComponent('carousel', 'carousel', {
+                numVisible: 2,
+                items: [
+                    { title: 'Alpha', description: 'First item' },
+                    { title: 'Beta', description: 'Second item' },
+                    { title: 'Gamma', description: 'Third item' },
+                ],
+            }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/media/PrimeCarousel.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Carousel } from 'primereact/carousel';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:carousel` component - a row of items paged through horizontally.
+ *
+ * Supplies an item template from the `titleField` and `descriptionField` properties, for the same reason
+ * `dataView` does: without one, every item renders empty.
+ */
+export function PrimeCarousel({ element }: RegisteredComponentProps) {
+    const titleField = stringProperty(element, 'titleField', 'title');
+    const descriptionField = stringProperty(element, 'descriptionField', 'description');
+    return (
+        <Carousel
+            data-scene-id={element.id}
+            value={recordArrayProperty(element, 'items')}
+            numVisible={numberProperty(element, 'numVisible', 3)}
+            numScroll={numberProperty(element, 'numScroll', 1)}
+            circular={booleanProperty(element, 'circular', false)}
+            itemTemplate={(item: Record<string, unknown>) => (
+                <div className='m-2 flex flex-col gap-1 border p-3'>
+                    <span className='font-semibold'>{String(item[titleField] ?? '')}</span>
+                    <span className='text-sm opacity-75'>{String(item[descriptionField] ?? '')}</span>
+                </div>
+            )}
+        />
+    );
+}

package/media/PrimeGalleria.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Galleria } from 'primereact/galleria';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, recordArrayProperty } from '../properties';
+
+/**
+ * The `PrimeReact:galleria` component - a gallery with thumbnails and a large view.
+ *
+ * Galleria ships no default templates, so the adapter supplies both; each item is read as
+ * `{ src, thumbnail, alt }` with the thumbnail falling back to the full image, which is the common case
+ * for a small gallery that has no separately generated thumbnails.
+ *
+ * In PrimeReact 11 this component is renamed `Gallery`.
+ */
+export function PrimeGalleria({ element }: RegisteredComponentProps) {
+    const items = recordArrayProperty(element, 'items');
+    return (
+        <Galleria
+            data-scene-id={element.id}
+            value={items}
+            numVisible={numberProperty(element, 'numVisible', 5)}
+            circular={booleanProperty(element, 'circular', true)}
+            showThumbnails={booleanProperty(element, 'showThumbnails', true)}
+            style={{ maxWidth: `${numberProperty(element, 'maxWidth', 480)}px` }}
+            item={(item: Record<string, unknown>) => (
+                <img src={String(item.src ?? '')} alt={String(item.alt ?? '')} className='block w-full' />
+            )}
+            thumbnail={(item: Record<string, unknown>) => (
+                <img src={String(item.thumbnail ?? item.src ?? '')} alt={String(item.alt ?? '')} className='block h-12' />
+            )}
+        />
+    );
+}

package/media/PrimeImage.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 { Image } from 'primereact/image';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:image` component - an image with an optional full-screen preview.
+ *
+ * `alt` defaults to an empty string rather than to the file name: an image with no authored alternative
+ * text is decorative until someone says otherwise, and inventing one would put a URL fragment in front of
+ * a screen reader.
+ */
+export function PrimeImage({ element }: RegisteredComponentProps) {
+    return (
+        <Image
+            data-scene-id={element.id}
+            src={stringProperty(element, 'src', '')}
+            alt={stringProperty(element, 'alt', '')}
+            width={stringProperty(element, 'width')}
+            height={stringProperty(element, 'height')}
+            preview={booleanProperty(element, 'preview', false)}
+        />
+    );
+}

package/media/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PrimeImage';
+export * from './PrimeGalleria';
+export * from './PrimeCarousel';

package/menu/MenuGallery.stories.tsx

@@ -0,0 +1,43 @@
+// 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/Menu',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The menu family. All ten read the same nested item model, so one authored menu can be shown as a menubar, a tiered menu or a dock without being restructured.' } },
+    },
+} 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('menu', 'menu', { items: ['New', 'Open', { separator: true }, 'Exit'] }),
+            sceneComponent('menubar', 'menubar', { items: [{ label: 'File', items: ['New', 'Open'] }, { label: 'Edit', items: ['Undo'] }] }),
+            sceneComponent('breadcrumb', 'breadcrumb', { items: ['Projects', 'Acme', 'Settings'] }),
+            sceneComponent('tabMenu', 'tabMenu', { items: [{ label: 'Overview', icon: 'pi pi-home' }, { label: 'Activity', icon: 'pi pi-list' }] }),
+            sceneComponent('steps', 'steps', { items: ['Account', 'Payment', 'Confirm'] }),
+            sceneComponent('tieredMenu', 'tieredMenu', { items: [{ label: 'File', items: [{ label: 'Export', items: ['PDF', 'CSV'] }] }] }),
+            sceneComponent('panelMenu', 'panelMenu', { items: [{ label: 'Reports', items: ['Monthly', 'Annual'] }] }),
+            sceneComponent('contextMenu', 'contextMenu', { label: 'Right-click this text', items: ['Copy', 'Paste'] }),
+            sceneComponent('megaMenu', 'megaMenu', {
+                items: [{ label: 'Catalog', items: [[{ label: 'Hardware', items: ['Laptops', 'Phones'] }]] }],
+            }),
+            sceneComponent('dock', 'dock', { items: [{ label: 'Home', icon: 'pi pi-home' }, { label: 'Search', icon: 'pi pi-search' }] }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/menu/PrimeBreadcrumb.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BreadCrumb } from 'primereact/breadcrumb';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:breadcrumb` component - the path to where the user currently is.
+ *
+ * The home entry is separate from the trail in PrimeReact's model, so it is read from its own `homeUrl`
+ * property and always rendered as an icon.
+ */
+export function PrimeBreadcrumb({ element }: RegisteredComponentProps) {
+    return (
+        <BreadCrumb
+            data-scene-id={element.id}
+            model={menuItemsProperty(element, 'items')}
+            home={{ icon: 'pi pi-home', url: stringProperty(element, 'homeUrl', '/') }}
+        />
+    );
+}

package/menu/PrimeContextMenu.tsx

@@ -0,0 +1,25 @@
+// 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 { ContextMenu } from 'primereact/contextmenu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:contextMenu` component - commands revealed by right-clicking a region.
+ *
+ * ContextMenu is opened by a caller reacting to a context-menu event, so the adapter renders the region
+ * that owns that event as well. Without it the menu could never be opened and the element would render
+ * as nothing at all.
+ */
+export function PrimeContextMenu({ element, slots }: RegisteredComponentProps) {
+    const menu = useRef<ContextMenu>(null);
+    return (
+        <div data-scene-id={element.id} onContextMenu={(event) => menu.current?.show(event)}>
+            <ContextMenu ref={menu} model={menuItemsProperty(element, 'items')} />
+            {slots.content?.length ? slots.content : <span>{stringProperty(element, 'label', 'Right-click here')}</span>}
+        </div>
+    );
+}

package/menu/PrimeDock.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Dock } from 'primereact/dock';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:dock` component - a macOS-style dock of magnifying icons.
+ *
+ * Dock positions itself absolutely against its nearest positioned ancestor, so it is wrapped in a sized
+ * relative box; dropped straight into a Scene tree it would otherwise pin itself to the page.
+ *
+ * In PrimeReact 11 this component is removed with no direct replacement.
+ */
+export function PrimeDock({ element }: RegisteredComponentProps) {
+    return (
+        <div data-scene-id={element.id} className='relative h-40 w-full'>
+            <Dock model={menuItemsProperty(element, 'items')} position={stringProperty(element, 'position', 'bottom') as 'top' | 'bottom' | 'left' | 'right'} />
+        </div>
+    );
+}

package/menu/PrimeMegaMenu.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 { MegaMenu } from 'primereact/megamenu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:megaMenu` component - a menubar whose submenus open as multi-column panels.
+ *
+ * MegaMenu reads its columns from a doubly nested `items` model: each root entry's `items` is a list of
+ * columns, and each column's `items` is the commands in it. `menuItemsProperty` follows the nesting to
+ * any depth, so an author writes that shape directly.
+ */
+export function PrimeMegaMenu({ element }: RegisteredComponentProps) {
+    return (
+        <MegaMenu
+            data-scene-id={element.id}
+            model={menuItemsProperty(element, 'items')}
+            orientation={stringProperty(element, 'orientation', 'horizontal') as 'horizontal' | 'vertical'}
+        />
+    );
+}

package/menu/PrimeMenu.tsx

@@ -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.
+
+import { Menu } from 'primereact/menu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+
+/**
+ * The `PrimeReact:menu` component - a flat list of commands.
+ */
+export function PrimeMenu({ element }: RegisteredComponentProps) {
+    return <Menu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} />;
+}

package/menu/PrimeMenubar.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Menubar } from 'primereact/menubar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+
+/**
+ * The `PrimeReact:menubar` component - a horizontal menu with nested submenus.
+ *
+ * The `start` and `end` slots take the branding and account controls that flank a real application's
+ * menubar; the commands themselves come from the `items` property.
+ */
+export function PrimeMenubar({ element, slots }: RegisteredComponentProps) {
+    return <Menubar data-scene-id={element.id} model={menuItemsProperty(element, 'items')} start={slots.start} end={slots.end} />;
+}