@cratis/scene.primereact 0.1.0

package/menu/PrimePanelMenu.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PanelMenu } from 'primereact/panelmenu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { booleanProperty } from '../properties';
+
+/**
+ * The `PrimeReact:panelMenu` component - a vertical menu whose submenus expand in place, accordion style.
+ *
+ * In PrimeReact 11 this component is removed with no direct replacement.
+ */
+export function PrimePanelMenu({ element }: RegisteredComponentProps) {
+    return (
+        <PanelMenu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} multiple={booleanProperty(element, 'multiple', false)} />
+    );
+}

package/menu/PrimeSteps.tsx

@@ -0,0 +1,27 @@
+// 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 { Steps } from 'primereact/steps';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { booleanProperty, numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:steps` component - progress through a sequence, shown as numbered labels.
+ *
+ * Unlike `stepper` this shows position only and owns no content; a screen pairs it with whatever it
+ * wants to render per step.
+ */
+export function PrimeSteps({ element }: RegisteredComponentProps) {
+    const [activeIndex, setActiveIndex] = useState(numberProperty(element, 'activeIndex', 0));
+    return (
+        <Steps
+            data-scene-id={element.id}
+            model={menuItemsProperty(element, 'items')}
+            activeIndex={activeIndex}
+            readOnly={booleanProperty(element, 'readOnly', false)}
+            onSelect={(event) => setActiveIndex(event.index)}
+        />
+    );
+}

package/menu/PrimeTabMenu.tsx

@@ -0,0 +1,27 @@
+// 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 { TabMenu } from 'primereact/tabmenu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+import { numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:tabMenu` component - tabs used for navigation rather than for hiding content.
+ *
+ * The selected tab is held locally so the control responds to clicks in a preview.
+ *
+ * In PrimeReact 11 this component is removed; navigation tabs are built from `Tabs` instead.
+ */
+export function PrimeTabMenu({ element }: RegisteredComponentProps) {
+    const [activeIndex, setActiveIndex] = useState(numberProperty(element, 'activeIndex', 0));
+    return (
+        <TabMenu
+            data-scene-id={element.id}
+            model={menuItemsProperty(element, 'items')}
+            activeIndex={activeIndex}
+            onTabChange={(event) => setActiveIndex(event.index)}
+        />
+    );
+}

package/menu/PrimeTieredMenu.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 { TieredMenu } from 'primereact/tieredmenu';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { menuItemsProperty } from '../menuItems';
+
+/**
+ * The `PrimeReact:tieredMenu` component - a vertical menu whose submenus open to the side.
+ */
+export function PrimeTieredMenu({ element }: RegisteredComponentProps) {
+    return <TieredMenu data-scene-id={element.id} model={menuItemsProperty(element, 'items')} />;
+}

package/menu/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 './PrimeMenu';
+export * from './PrimeMenubar';
+export * from './PrimeBreadcrumb';
+export * from './PrimeTabMenu';
+export * from './PrimeSteps';
+export * from './PrimeTieredMenu';
+export * from './PrimePanelMenu';
+export * from './PrimeContextMenu';
+export * from './PrimeMegaMenu';
+export * from './PrimeDock';

package/menuItems.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { MenuItem } from 'primereact/menuitem';
+import { SceneElement } from '@cratis/scene.model';
+import { arrayProperty } from './properties';
+
+/**
+ * Turns raw authored entries into the `MenuItem` model every PrimeReact menu, menubar, breadcrumb,
+ * split button and dock takes.
+ *
+ * Ten different components in this package all want the same nested `{ label, icon, items }` shape, so
+ * reading it lives here once rather than in each of them. Nesting is followed to any depth because a
+ * menubar and a tiered menu differ only in how deep an author actually goes - the reader should not be
+ * the thing that decides.
+ *
+ * Entries with no usable label are dropped rather than rendered blank, and a `separator: true` entry is
+ * kept without one, because that is PrimeReact's own way of spelling a divider.
+ *
+ * @param entries The raw entries to convert.
+ * @returns The converted menu items, in order.
+ */
+export function toMenuItems(entries: unknown[]): MenuItem[] {
+    const items: MenuItem[] = [];
+    for (const entry of entries) {
+        if (typeof entry === 'string') {
+            items.push({ label: entry });
+            continue;
+        }
+
+        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;
+
+        const record = entry as Record<string, unknown>;
+        const item: MenuItem = {};
+        if (typeof record.label === 'string') item.label = record.label;
+        if (typeof record.icon === 'string') item.icon = record.icon;
+        if (typeof record.url === 'string') item.url = record.url;
+        if (typeof record.disabled === 'boolean') item.disabled = record.disabled;
+        if (record.separator === true) item.separator = true;
+        if (Array.isArray(record.items)) item.items = toMenuItems(record.items);
+        if (item.label === undefined && item.separator !== true) continue;
+        items.push(item);
+    }
+
+    return items;
+}
+
+/**
+ * Reads a menu model off a Scene element's properties.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name holding the entries.
+ * @returns The converted menu items, empty when the property is missing or is not an array.
+ */
+export function menuItemsProperty(element: SceneElement, name: string): MenuItem[] {
+    return toMenuItems(arrayProperty(element, name));
+}

package/messages/MessageGallery.stories.tsx

@@ -0,0 +1,34 @@
+// 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/Messages',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The message family. `message` and `inlineMessage` share PrimeReact\'s Message component but mean different things on a screen - one is about a region, the other about the field beside it - and the width is the difference a reader sees.' } },
+    },
+} 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('message', 'message', { severity: 'info', text: 'Changes are saved automatically.' }),
+            sceneComponent('inlineMessage', 'inlineMessage', { severity: 'error', text: 'Required' }),
+            sceneComponent('toast', 'toast', { severity: 'success', summary: 'Saved', detail: 'The project was updated.' }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/messages/PrimeInlineMessage.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 { Message } from 'primereact/message';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.
+ *
+ * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation
+ * hint reads as belonging to one field rather than to the whole form.
+ */
+export function PrimeInlineMessage({ element }: RegisteredComponentProps) {
+    return (
+        <Message
+            data-scene-id={element.id}
+            className='inline-flex'
+            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}
+            text={stringProperty(element, 'text', '')}
+        />
+    );
+}

package/messages/PrimeMessage.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 { Message } from 'primereact/message';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.
+ *
+ * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's
+ * `Message` component but mean different things on a screen, and the width is the difference a reader
+ * actually sees.
+ */
+export function PrimeMessage({ element }: RegisteredComponentProps) {
+    return (
+        <Message
+            data-scene-id={element.id}
+            className='w-full'
+            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}
+            text={stringProperty(element, 'text', '')}
+        />
+    );
+}

package/messages/PrimeToast.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 { useEffect, useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:toast` component - a transient notification in a corner of the screen.
+ *
+ * Toast is purely imperative: it renders nothing until someone calls `show`. A Scene element cannot make
+ * that call, so the adapter makes it once on mount from the element's own properties. The element
+ * therefore reads as "this screen announces this" rather than as a component that happens to render
+ * nothing, which is what a literal wrapper would produce.
+ */
+export function PrimeToast({ element }: RegisteredComponentProps) {
+    const toast = useRef<Toast>(null);
+    const severity = stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error';
+    const summary = stringProperty(element, 'summary', '');
+    const detail = stringProperty(element, 'detail', '');
+    const life = numberProperty(element, 'life', 3000);
+
+    useEffect(() => {
+        toast.current?.show({ severity, summary, detail, life });
+    }, [severity, summary, detail, life]);
+
+    return <Toast ref={toast} data-scene-id={element.id} position={stringProperty(element, 'position', 'top-right') as 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'} />;
+}

package/messages/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 './PrimeMessage';
+export * from './PrimeInlineMessage';
+export * from './PrimeToast';

package/misc/MiscGallery.stories.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 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/Misc',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The remaining components: indicators, badges, placeholders and a terminal. `terminal` accepts input and answers nothing until the hosting application subscribes to PrimeReact\'s TerminalService - responding to a command is application behavior, not something a Scene element can express.' } },
+    },
+} 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('avatar', 'avatar', { label: 'AL', shape: 'circle' }),
+            sceneComponent('badge', 'badge', { value: '8', severity: 'danger' }),
+            sceneComponent('chip', 'chip', { label: 'Engineering', icon: 'pi pi-users', removable: true }),
+            sceneComponent('tag', 'tag', { value: 'Published', severity: 'success', rounded: true }),
+            sceneComponent('progressBar', 'progressBar', { value: 65 }),
+            sceneComponent('progressSpinner', 'progressSpinner', { size: 40 }),
+            sceneComponent('skeleton', 'skeleton', { width: '12rem', height: '2rem' }),
+            sceneComponent('scrollTop', 'scrollTop', { height: 140 }, { content: [sceneComponent('scrollTopText', 'text', { text: 'Scroll this box to reveal the button.' })] }),
+            sceneComponent('blockUI', 'blockUI', { blocked: true }, { content: [sceneComponent('blockText', 'text', { text: 'Blocked content' })] }),
+            sceneComponent('inplace', 'inplace', { label: 'Click to edit' }, { content: [sceneComponent('inplaceInput', 'inputText', { value: 'Editable' })] }),
+            sceneComponent('terminal', 'terminal', { welcomeMessage: 'Scene preview terminal', prompt: 'scene $' }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/misc/PrimeAvatar.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 { Avatar } from 'primereact/avatar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:avatar` component - a person or entity shown as initials, an icon or a picture.
+ */
+export function PrimeAvatar({ element }: RegisteredComponentProps) {
+    return (
+        <Avatar
+            data-scene-id={element.id}
+            label={stringProperty(element, 'label')}
+            icon={stringProperty(element, 'icon')}
+            image={stringProperty(element, 'image')}
+            size={stringProperty(element, 'size', 'normal') as 'normal' | 'large' | 'xlarge'}
+            shape={stringProperty(element, 'shape', 'square') as 'square' | 'circle'}
+        />
+    );
+}

package/misc/PrimeBadge.tsx

@@ -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.
+
+import { Badge } from 'primereact/badge';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:badge` component - a small count or status marker.
+ */
+export function PrimeBadge({ element }: RegisteredComponentProps) {
+    return (
+        <Badge
+            data-scene-id={element.id}
+            value={stringProperty(element, 'value', '')}
+            severity={stringProperty(element, 'severity') as 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | undefined}
+            size={stringProperty(element, 'size') as 'normal' | 'large' | 'xlarge' | undefined}
+        />
+    );
+}

package/misc/PrimeBlockUI.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BlockUI } from 'primereact/blockui';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty } from '../properties';
+
+/**
+ * The `PrimeReact:blockUI` component - a region masked while something is in flight.
+ *
+ * In PrimeReact 11 this component is removed with no direct replacement.
+ */
+export function PrimeBlockUI({ element, slots }: RegisteredComponentProps) {
+    return (
+        <BlockUI data-scene-id={element.id} blocked={booleanProperty(element, 'blocked', true)}>
+            {slots.content}
+        </BlockUI>
+    );
+}

package/misc/PrimeChip.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 { Chip } from 'primereact/chip';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:chip` component - a compact, optionally removable label.
+ */
+export function PrimeChip({ element }: RegisteredComponentProps) {
+    return (
+        <Chip
+            data-scene-id={element.id}
+            label={stringProperty(element, 'label')}
+            icon={stringProperty(element, 'icon')}
+            image={stringProperty(element, 'image')}
+            removable={booleanProperty(element, 'removable', false)}
+        />
+    );
+}

package/misc/PrimeInplace.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 { Inplace, InplaceContent, InplaceDisplay } from 'primereact/inplace';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:inplace` component - a read-only value that becomes an editor when clicked.
+ *
+ * The collapsed view comes from the `label` property and the expanded view from the `content` slot,
+ * because the two are different kinds of thing: one is a value, the other is whatever editor the screen
+ * wants behind it.
+ */
+export function PrimeInplace({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Inplace data-scene-id={element.id} closable={booleanProperty(element, 'closable', true)}>
+            <InplaceDisplay>{stringProperty(element, 'label', 'Click to edit')}</InplaceDisplay>
+            <InplaceContent>{slots.content}</InplaceContent>
+        </Inplace>
+    );
+}

package/misc/PrimeProgressBar.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 { ProgressBar } from 'primereact/progressbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:progressBar` component - determinate or indeterminate progress.
+ *
+ * The mode follows whether a `value` was given at all: progress you cannot measure is exactly what
+ * indeterminate mode is for, so an element with no value animates rather than sitting at zero.
+ */
+export function PrimeProgressBar({ element }: RegisteredComponentProps) {
+    const value = numberProperty(element, 'value');
+    return (
+        <ProgressBar
+            data-scene-id={element.id}
+            value={value}
+            mode={value === undefined ? 'indeterminate' : 'determinate'}
+            showValue={booleanProperty(element, 'showValue', true)}
+            style={{ height: '1rem' }}
+        />
+    );
+}

package/misc/PrimeProgressSpinner.tsx

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:progressSpinner` component - an indeterminate busy indicator.
+ */
+export function PrimeProgressSpinner({ element }: RegisteredComponentProps) {
+    const size = numberProperty(element, 'size', 50);
+    return <ProgressSpinner data-scene-id={element.id} strokeWidth='4' style={{ width: `${size}px`, height: `${size}px` }} />;
+}

package/misc/PrimeScrollTop.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 { ScrollTop } from 'primereact/scrolltop';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty } from '../properties';
+
+/**
+ * The `PrimeReact:scrollTop` component - a button that returns the reader to the top.
+ *
+ * Targets its own scrollable parent rather than the window, and the adapter provides that parent. A
+ * window-targeted ScrollTop inside a composed screen would scroll something the element does not own,
+ * and would stay invisible in any preview shorter than a page.
+ *
+ * In PrimeReact 11 this becomes a hook rather than a component.
+ */
+export function PrimeScrollTop({ element, slots }: RegisteredComponentProps) {
+    return (
+        <div data-scene-id={element.id} className='relative overflow-auto' style={{ height: `${numberProperty(element, 'height', 200)}px` }}>
+            {slots.content}
+            <ScrollTop target='parent' threshold={numberProperty(element, 'threshold', 100)} />
+        </div>
+    );
+}

package/misc/PrimeSkeleton.tsx

@@ -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.
+
+import { Skeleton } from 'primereact/skeleton';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:skeleton` component - the shape of content that has not arrived yet.
+ */
+export function PrimeSkeleton({ element }: RegisteredComponentProps) {
+    return (
+        <Skeleton
+            data-scene-id={element.id}
+            shape={stringProperty(element, 'shape', 'rectangle') as 'rectangle' | 'circle'}
+            width={stringProperty(element, 'width', '100%')}
+            height={stringProperty(element, 'height', '1rem')}
+        />
+    );
+}

package/misc/PrimeTag.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 { Tag } from 'primereact/tag';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:tag` component - a colored status label, the read-only counterpart to a chip.
+ */
+export function PrimeTag({ element }: RegisteredComponentProps) {
+    return (
+        <Tag
+            data-scene-id={element.id}
+            value={stringProperty(element, 'value', '')}
+            icon={stringProperty(element, 'icon')}
+            severity={stringProperty(element, 'severity') as 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | undefined}
+            rounded={booleanProperty(element, 'rounded', false)}
+        />
+    );
+}

package/misc/PrimeTerminal.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 { Terminal } from 'primereact/terminal';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:terminal` component - a command-line surface.
+ *
+ * Terminal publishes typed commands on `TerminalService` and waits for something to answer. Nothing in
+ * this package answers, because responding to a command is application behavior and a Scene element
+ * cannot express it. The component therefore accepts input and prints nothing back until the hosting
+ * application subscribes - which is the honest shape of a terminal with no backend, not a broken one.
+ */
+export function PrimeTerminal({ element }: RegisteredComponentProps) {
+    return (
+        <Terminal
+            data-scene-id={element.id}
+            welcomeMessage={stringProperty(element, 'welcomeMessage', 'Welcome')}
+            prompt={stringProperty(element, 'prompt', '$')}
+        />
+    );
+}

package/misc/index.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PrimeAvatar';
+export * from './PrimeBadge';
+export * from './PrimeChip';
+export * from './PrimeTag';
+export * from './PrimeProgressBar';
+export * from './PrimeProgressSpinner';
+export * from './PrimeSkeleton';
+export * from './PrimeScrollTop';
+export * from './PrimeBlockUI';
+export * from './PrimeInplace';
+export * from './PrimeTerminal';

package/overlay/OverlayGallery.stories.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 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/Overlay',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The overlay family. Each one renders its own trigger: an overlay is only interesting while it is open, and a Scene element has nowhere to record that a user closed it, so the adapter owns visibility and keeps a way back.' } },
+    },
+} 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('dialog', 'dialog', { header: 'Edit project' }, { content: [sceneComponent('dialogText', 'text', { text: 'Dialog body' })] }),
+            sceneComponent('confirmDialog', 'confirmDialog', { message: 'Delete this project?', triggerLabel: 'Delete' }),
+            sceneComponent('overlayPanel', 'overlayPanel', { triggerLabel: 'Details' }, { content: [sceneComponent('overlayText', 'text', { text: 'Overlay body' })] }),
+            sceneComponent('sidebar', 'sidebar', { position: 'right', triggerLabel: 'Open panel' }, { content: [sceneComponent('sidebarText', 'text', { text: 'Sidebar body' })] }),
+            sceneComponent('tooltip', 'tooltip', { text: 'Explains the thing', label: 'Hover me' }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};