@cratis/scene.primereact 0.1.0

package/.storybook/main.ts

@@ -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 type { StorybookConfig } from "@storybook/react-vite";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import type { InlineConfig } from 'vite';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+    // Scoped away from `dist/` so a story is never indexed twice - once as source and once as the
+    // tsc-emitted copy beside it.
+    stories: ["../*.stories.@(js|jsx|mjs|ts|tsx)", "../!(dist|node_modules)/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [getAbsolutePath("@storybook/addon-links")],
+    framework: { name: getAbsolutePath("@storybook/react-vite"), options: {} },
+    async viteFinal(config: InlineConfig) {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@cratis/scene.engine': resolve(__dirname, '../../engine/index.ts'),
+            '@cratis/scene.model': resolve(__dirname, '../../model/index.ts'),
+            '@cratis/scene.react': resolve(__dirname, '../../react/index.ts'),
+        };
+        return config;
+    },
+};
+export default config;
+
+function getAbsolutePath(value: string): string {
+    return dirname(fileURLToPath(import.meta.resolve(join(value, "package.json"))));
+}

package/.storybook/preview.css

@@ -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. */
+
+/*
+ * A stand-in for the handful of Tailwind utility classes this package's wrappers use.
+ *
+ * The package declares a Scene dependency on the Tailwind *package*, not an npm dependency on
+ * `tailwindcss` - a Scene profile activates Tailwind, and the application it is embedded in owns that
+ * build. Storybook has no such application, so without this the galleries would render every wrapper
+ * unstyled and misrepresent what the components look like in a real profile.
+ *
+ * This is deliberately only the classes actually used in this package's `.tsx` files, written out by
+ * hand. It is Storybook scaffolding, not a Tailwind implementation, and nothing outside `.storybook`
+ * loads it.
+ */
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.block { display: block; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.p-3 { padding: 0.75rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.m-2 { margin: 0.5rem; }
+.w-full { width: 100%; }
+.w-64 { width: 16rem; }
+.w-40 { width: 10rem; }
+.h-40 { height: 10rem; }
+.h-12 { height: 3rem; }
+.relative { position: relative; }
+.overflow-auto { overflow: auto; }
+.border { border: 1px solid var(--scene-surface-border); }
+.font-semibold { font-weight: 600; }
+.opacity-75 { opacity: 0.75; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }

package/.storybook/preview.ts

@@ -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 type { Preview } from '@storybook/react';
+
+// The order matters and mirrors what an application does. PrimeReact's structural CSS and the initial
+// compiled theme come first; `primeReactTheme.css` then bridges that theme's variables onto the Scene
+// tokens every wrapper reads. The theme-switching story replaces the theme stylesheet at runtime through
+// `usePrimeReactTheme`, exactly as an application would.
+import 'primereact/resources/themes/lara-light-blue/theme.css';
+import 'primereact/resources/primereact.css';
+import 'primeicons/primeicons.css';
+import '../primeReactTheme.css';
+import './preview.css';
+
+const preview: Preview = {
+    parameters: {
+        controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } },
+    },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,182 @@
+# @cratis/scene.primereact
+
+The PrimeReact component package for Scene. It maps Scene's abstract component names onto real
+PrimeReact 10 components, and PrimeReact's free PrimeTek themes onto Scene `Theme` objects.
+
+User-facing documentation lives in [`Documentation/primereact-package/`](../../../Documentation/primereact-package/index.md).
+This file is the contributor's note: the conventions the source follows and the reasoning behind them.
+
+## Layout
+
+```text
+primereact/
+├── primeReactPackage.ts        the ScenePackage manifest + the ScenePackageBundle
+├── primeReactComponents.ts     the ComponentRegistry - every abstract name to its adapter
+├── properties.ts               typed readers for element.properties
+├── menuItems.ts, treeNodes.ts  shared readers for the two nested models PrimeReact reuses
+├── primeReactTheme.css         the Scene token <-> PrimeReact variable bridge
+├── storyElements.ts            fixture builders the galleries share
+├── button/ data/ form/ media/ menu/ messages/ misc/ overlay/ panel/ screen/
+│                               one adapter per file, grouped by PrimeReact family
+├── theme/                      the theme catalog, the stylesheet helper and the live swap
+└── for_*/                      BDD specs beside the code they specify
+```
+
+## Conventions
+
+**Adapters are named `Prime<Component>`.** The adapter for `dropdown` is `PrimeDropdown`, in
+`form/PrimeDropdown.tsx`. The prefix exists because the file also imports PrimeReact's own `Dropdown`,
+and two things called `Dropdown` in one file is how confusion starts. It follows the `CoreButton` /
+`CoreText` precedent in `@cratis/scene.react`.
+
+**Abstract names are `lowerCamelCase`** — `inputText`, `dataTable`, `selectButton`. The abstract name
+follows what the component *is*, not what PrimeReact 10 happens to call it: `toggleSwitch` maps onto v10's
+`InputSwitch`, and v11 renames that component to `ToggleSwitch`, so the abstract name was already right.
+
+**Three names are deliberately shared with `core`** — `text`, `button` and `card`. That is override
+priority working as designed, not a collision. Seven more (`table`, `column`, `title`, `field`,
+`section`, `summary`, `action`) are the directive kinds Screenplay's screen vocabulary compiles to.
+
+**Read properties through `properties.ts`, never with a cast.** `@typescript-eslint/no-explicit-any` is
+an error here, and a cast would let a mistyped property reach PrimeReact instead of falling back. The
+readers treat a wrongly typed property exactly like a missing one.
+
+**Local state where a Scene element cannot express it.** A `SceneElement`'s `properties` are authored
+design-time configuration; there is nowhere in the model to put "what the user typed" or "the user closed
+the dialog". Every interactive adapter therefore seeds local state from its properties. The consequence
+is intentional: a preview is operable rather than frozen, and the interaction stays local to the rendered
+component.
+
+## The token vocabulary
+
+Thirteen semantic tokens, and every Scene package must agree on them — a vocabulary that grows per
+package is one no package can rely on. `primeReactTheme.css` is the only place the Scene names and
+PrimeReact's names meet.
+
+| Scene token | CSS custom property | PrimeReact 10 variable |
+| --- | --- | --- |
+| `primary.color` | `--scene-primary-color` | `--primary-color` |
+| `primary.contrastColor` | `--scene-primary-contrast-color` | `--primary-color-text` |
+| `surface.background` | `--scene-surface-background` | `--surface-ground` |
+| `surface.card` | `--scene-surface-card` | `--surface-card` |
+| `surface.border` | `--scene-surface-border` | `--surface-border` |
+| `surface.hover` | `--scene-surface-hover` | `--surface-hover` |
+| `surface.overlay` | `--scene-surface-overlay` | `--surface-overlay` |
+| `text.color` | `--scene-text-color` | `--text-color` |
+| `text.mutedColor` | `--scene-text-muted-color` | `--text-color-secondary` |
+| `highlight.background` | `--scene-highlight-background` | `--highlight-bg` |
+| `highlight.color` | `--scene-highlight-color` | `--highlight-text-color` |
+| `content.borderRadius` | `--scene-content-border-radius` | `--border-radius` |
+| `focus.ring` | `--scene-focus-ring` | `--focus-ring` |
+
+The bridge runs both ways, and the scoping is load-bearing. On `:root`, each Scene token falls back to
+the loaded PrimeReact theme. Inside `[data-scene-theme-root]` — the element `SceneThemeProvider` writes
+tokens onto — the Scene tokens are fed back onto PrimeReact's variables. The second rule must never move
+to `:root`: custom properties that reference each other on the *same* element form a cycle, are invalid
+at computed-value time, and resolve to nothing.
+
+## Themes
+
+25 free PrimeTek themes. Token values are read verbatim from each theme's own `theme.css` `:root` block,
+so a Scene token always agrees with what the PrimeReact stylesheet renders — including `lara-light-teal`,
+which really does ship the same color for `--highlight-bg` and `--highlight-text-color`. There is one
+deliberate deviation: PrimeReact 10.9.8 ships `viva-dark` with an unresolved SCSS expression,
+`rgba($primaryColor, 0.08)`, for `--surface-hover`; that is not valid CSS, so the intended value is used
+instead.
+
+Every theme is PrimeTek's work and none is ours. Attribution is applied once in `primeReactThemes.ts` to
+every preset rather than written per theme, so a twenty-sixth theme cannot be added without it. The full
+attribution table is in
+[the theme reference](../../../Documentation/primereact-package/theme-reference.md).
+
+| Field | Value |
+| --- | --- |
+| `author` | `PrimeTek` |
+| `authorUrl` | `https://primereact.org` |
+| `license` | `MIT` — verified in `node_modules/primereact/LICENSE.md`: "The MIT License (MIT), Copyright (c) 2016-2025 PrimeTek" |
+
+`compatibleWith` is `['PrimeReact', 'Tailwind', 'core']`. `core` is listed deliberately:
+`ThemeCompatibility` has no implicit exemption for it, and these themes genuinely reach `core`'s
+components — through the semantic token layer `SceneThemeProvider` applies to the whole subtree, though
+not through the PrimeReact stylesheet, which only ever matches `.p-*` elements.
+
+## Not covered
+
+| Component | Why |
+| --- | --- |
+| `chart` | PrimeReact's `Chart` is a thin wrapper over Chart.js and does nothing without `chart.js` installed and a full Chart.js configuration object. Adding a charting library as a dependency of a component-mapping package is out of scope; charting deserves its own Scene package with its own vocabulary. |
+| `editor` | `Editor` wraps Quill and needs `quill` installed. Same reasoning — a rich-text editor is a product decision, not a mapping. |
+
+Both are genuinely useful and both are deliberate omissions, not oversights. A profile needing them
+should activate a package that owns that dependency.
+
+Also worth knowing: `column` renders nothing on its own. That is PrimeReact's own semantics — a bare
+`<Column/>` outside a `DataTable` renders nothing either. When a `column` element is nested under
+`dataTable` or `table`, the table reads its `field`/`header`/`sortable` off the *model* (`element.slots`)
+rather than the rendered node, because PrimeReact identifies its columns by React element type and a
+wrapper would not be recognized as one.
+
+## Migrating to PrimeReact 11
+
+PrimeReact 11 exists, but this package targets **10.9.8** and must keep doing so: Cratis Studio pins
+`primereact` to `10.9.8` through a root `resolutions` entry, and `@cratis/components` depends on exactly
+that version. Import from `primereact/*` only — never `@primereact/*` or `@primeuix/themes`.
+
+The renames are recorded here so the eventual port is a known quantity rather than a discovery.
+
+### Renames
+
+| PrimeReact 10 | PrimeReact 11 |
+| --- | --- |
+| `Dropdown` | `Select` |
+| `Calendar` | `DatePicker` |
+| `OverlayPanel` | `Popover` |
+| **`Sidebar`** | **`Drawer`** |
+| `InputSwitch` | `ToggleSwitch` |
+| `TabView` + `TabPanel` | `Tabs` |
+| `InputTextarea` | `Textarea` |
+| `Password` | `InputPassword` |
+| `Chips` | `InputTags` |
+| `ColorPicker` | `InputColor` |
+| `Galleria` | `Gallery` |
+| `ScrollPanel` | `ScrollArea` |
+| `SelectButton` | `ToggleButtonGroup` |
+
+> [!WARNING]
+> **`Sidebar` is the trap.** v10's `Sidebar` becomes `Drawer`, *and* v11 introduces a brand-new,
+> unrelated `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, and it will compile.
+
+### Moved to commercial packages
+
+`Chart` and `Editor` move to `@primeuipro/*` and have no React release yet. This package does not map
+either of them, so nothing here is affected.
+
+### Became hooks
+
+`InputMask`, `KeyFilter`, `ScrollTop`, `OrderList` and `PickList` are hooks in v11 rather than
+components. The four this package maps — `inputMask`, `scrollTop`, `orderList`, `pickList` — each need a
+rewrite, not a rename.
+
+### Removed
+
+`ConfirmPopup`, `BlockUI`, `PanelMenu`, `TabMenu`, `DeferredContent`, `DataScroller`,
+`TriStateCheckbox`, `MultiStateCheckbox`, `SlideMenu`, `Mention`, `Dock` and `Ripple` are gone. Four of
+them are mapped here — `blockUI`, `panelMenu`, `tabMenu` and `dock` — and each needs a replacement built
+from what remains, or the abstract name retired from the manifest.
+
+### Icons
+
+v11 components ship **no icons**. Every `icon` property this package passes through assumes `primeicons`
+is loaded, which stays true, but v11's own components no longer bundle their internal ones.
+
+## Gates
+
+Run from this folder:
+
+```bash
+yarn build          # tsc -b + rollup
+yarn test           # vitest
+yarn lint:ci        # eslint, zero warnings
+yarn build-storybook
+```

package/SelectOption.ts

@@ -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.
+
+/**
+ * One choice in a selection component - a dropdown, a multi-select, a list box, a set of radio buttons.
+ *
+ * Scene elements carry properties as untyped JSON, so an `options` property arrives as anything at all.
+ * Normalizing every shape a screen author might reasonably write (a bare string, or a record with a
+ * label and a value) into this one type is what keeps every selection adapter from re-deriving the same
+ * guesswork - and what lets them all pass `optionLabel="label"` / `optionValue="value"` to PrimeReact
+ * without inspecting the data first.
+ */
+export interface SelectOption {
+    /**
+     * The text shown to the user.
+     */
+    label: string;
+
+    /**
+     * The value carried when the option is picked. Falls back to the label when a screen only supplied
+     * text, so a one-value-per-label list stays valid without the author repeating themselves.
+     */
+    value: string;
+}

package/button/ButtonGallery.stories.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 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/Button',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The button family. Note that `button` deliberately claims the same bare name `core` declares, so a profile listing core then PrimeReact resolves it here.' } },
+    },
+} 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('button', 'button', { label: 'Save', icon: 'pi pi-check' }),
+            sceneComponent('splitButton', 'splitButton', { label: 'Save', items: ['Save as draft', { separator: true }, 'Discard'] }),
+            sceneComponent('speedDial', 'speedDial', { items: [{ label: 'Add', icon: 'pi pi-plus' }, { label: 'Edit', icon: 'pi pi-pencil' }] }),
+            sceneComponent('buttonGroup', 'buttonGroup', { buttons: ['Left', 'Middle', 'Right'] }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/button/PrimeButton.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 { Button } from 'primereact/button';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:button` component.
+ *
+ * Deliberately claims the same bare name `core` already declares. A `ui profile` listing `core` and then
+ * `PrimeReact` resolves `button` to this one and records that it shadowed core's - which is the whole
+ * point of override priority, and the reason a screen written against the fallback vocabulary gets a real
+ * themed button the moment a component library is added to the profile, with no edit to the screen.
+ */
+export function PrimeButton({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Button
+            data-scene-id={element.id}
+            label={stringProperty(element, 'label')}
+            icon={stringProperty(element, 'icon')}
+            severity={stringProperty(element, 'severity') as 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined}
+            outlined={booleanProperty(element, 'outlined', false)}
+            text={booleanProperty(element, 'text', false)}
+            rounded={booleanProperty(element, 'rounded', false)}
+            loading={booleanProperty(element, 'loading', false)}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            {slots.content}
+        </Button>
+    );
+}

package/button/PrimeButtonGroup.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 { ButtonGroup } from 'primereact/buttongroup';
+import { Button } from 'primereact/button';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { optionsProperty } from '../properties';
+
+/**
+ * The `PrimeReact:buttonGroup` component - buttons joined into one visually continuous control.
+ *
+ * ButtonGroup styles its children by position, so it needs real `Button` elements as children. Slot
+ * content is therefore rendered when a screen supplies it, and otherwise the group is built from a
+ * `buttons` property - which is what lets a generated screen produce a group without having to nest
+ * elements it does not otherwise need.
+ */
+export function PrimeButtonGroup({ element, slots }: RegisteredComponentProps) {
+    const buttons = optionsProperty(element, 'buttons');
+    return (
+        <ButtonGroup data-scene-id={element.id}>
+            {slots.content?.length ? slots.content : buttons.map((button) => <Button key={button.value} label={button.label} />)}
+        </ButtonGroup>
+    );
+}

package/button/PrimeSpeedDial.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 { SpeedDial } from 'primereact/speeddial';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+import { menuItemsProperty } from '../menuItems';
+
+/**
+ * The `PrimeReact:speedDial` component - a floating action button that fans its actions out on hover.
+ *
+ * Rendered inside a sized, relatively positioned box because SpeedDial positions itself absolutely
+ * against its nearest positioned ancestor; dropped straight into a Scene tree it would otherwise anchor
+ * itself to the page and float over unrelated content.
+ */
+export function PrimeSpeedDial({ element }: RegisteredComponentProps) {
+    return (
+        <div data-scene-id={element.id} className='relative h-40 w-40'>
+            <SpeedDial
+                model={menuItemsProperty(element, 'items')}
+                direction={stringProperty(element, 'direction', 'up') as 'up' | 'down' | 'left' | 'right'}
+                type={stringProperty(element, 'type', 'linear') as 'linear' | 'circle' | 'semi-circle' | 'quarter-circle'}
+            />
+        </div>
+    );
+}

package/button/PrimeSplitButton.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 { SplitButton } from 'primereact/splitbutton';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+import { menuItemsProperty } from '../menuItems';
+
+/**
+ * The `PrimeReact:splitButton` component - a primary action with a dropdown of related ones.
+ *
+ * The secondary actions come from an `items` property rather than from slots, because PrimeReact drives
+ * them from a data model and not from children; feeding it rendered React nodes would give it no labels
+ * to show.
+ */
+export function PrimeSplitButton({ element }: RegisteredComponentProps) {
+    return (
+        <SplitButton
+            data-scene-id={element.id}
+            label={stringProperty(element, 'label')}
+            icon={stringProperty(element, 'icon')}
+            model={menuItemsProperty(element, 'items')}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/button/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PrimeButton';
+export * from './PrimeSplitButton';
+export * from './PrimeSpeedDial';
+export * from './PrimeButtonGroup';

package/data/ColumnDefinition.ts

@@ -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.
+
+/**
+ * One column of a table, reduced to what PrimeReact's `Column` actually needs to render it.
+ */
+export interface ColumnDefinition {
+    /**
+     * The row property the column shows.
+     */
+    field: string;
+
+    /**
+     * The column heading. Falls back to the field name, so a column authored with only a field is still
+     * labeled rather than blank.
+     */
+    header: string;
+
+    /**
+     * Whether clicking the heading sorts by this column.
+     */
+    sortable: boolean;
+}

package/data/DataGallery.stories.tsx

@@ -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 { Meta, StoryObj } from '@storybook/react';
+import { SceneElementView } from '@cratis/scene.react';
+import { primeReactComponents } from '../primeReactComponents';
+import { sceneComponent, sceneGallery } from '../storyElements';
+
+const meta = {
+    title: 'PrimeReact/Data',
+    component: SceneElementView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        docs: { description: { component: 'The data family. `dataTable` is also registered under Screenplay\'s `table` name, and works out its columns from nested `column` children, a `columns` property, or the shape of the first row.' } },
+    },
+} 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(
+                'table',
+                'table',
+                { rows: [{ name: 'Ada', role: 'Engineer' }, { name: 'Grace', role: 'Admiral' }] },
+                {
+                    columns: [
+                        sceneComponent('c1', 'column', { field: 'name', header: 'Name', sortable: true }),
+                        sceneComponent('c2', 'column', { field: 'role', header: 'Role' }),
+                    ],
+                }
+            ),
+            sceneComponent('dataTable', 'dataTable', { rows: [{ id: 1, title: 'Inferred columns' }] }),
+            sceneComponent('dataView', 'dataView', { rows: [{ title: 'Kickoff', description: 'Agree the scope' }] }),
+            sceneComponent('tree', 'tree', { nodes: [{ label: 'Documents', children: ['Work', 'Home'] }] }),
+            sceneComponent('treeTable', 'treeTable', {
+                columns: [{ field: 'name', header: 'Name' }],
+                nodes: [{ label: 'Root', data: { name: 'Root' }, children: [{ label: 'Child', data: { name: 'Child' } }] }],
+            }),
+            sceneComponent('timeline', 'timeline', {
+                events: [{ title: 'Ordered', description: 'Order placed', date: '09:00' }, { title: 'Shipped', description: 'Left the depot', date: '14:20' }],
+            }),
+            sceneComponent('paginator', 'paginator', { totalRecords: 120, pageSize: 10 }),
+            sceneComponent('orderList', 'orderList', { header: 'Priority', items: ['First', 'Second', 'Third'] }),
+            sceneComponent('pickList', 'pickList', { source: ['Alpha', 'Beta'], target: ['Gamma'] }),
+            sceneComponent('organizationChart', 'organizationChart', { nodes: [{ label: 'CEO', children: ['CTO', 'CFO'] }] }),
+            sceneComponent('virtualScroller', 'virtualScroller', { items: Array.from({ length: 200 }, (_, index) => `Row ${index + 1}`) }),
+        ]),
+        registry: primeReactComponents,
+        resolveBinding: () => undefined,
+    },
+};

package/data/PrimeColumn.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 { Column } from 'primereact/column';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:column` component - one column of a table.
+ *
+ * Like PrimeReact's own `Column`, this is configuration rather than output: it renders nothing on its
+ * own and only means something inside a table. That is not a Scene quirk - a bare `<Column/>` in
+ * PrimeReact renders nothing either. When a `column` element is nested under `dataTable` or `table`,
+ * the table reads its `field`, `header` and `sortable` properties off the model rather than using this
+ * rendered output; see `columnDefinitions` for why.
+ */
+export function PrimeColumn({ element }: RegisteredComponentProps) {
+    const field = stringProperty(element, 'field', '');
+    return <Column field={field} header={stringProperty(element, 'header', field)} sortable={booleanProperty(element, 'sortable', false)} />;
+}

package/data/PrimeDataTable.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 { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';
+import { columnDefinitions } from './columnDefinitions';
+
+/**
+ * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen
+ * compiled from a `.play` file renders through this package without a translation step.
+ *
+ * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or
+ * are inferred from the first row - see `columnDefinitions`.
+ */
+export function PrimeDataTable({ element }: RegisteredComponentProps) {
+    const rows = recordArrayProperty(element, 'rows');
+    const columns = columnDefinitions(element, rows);
+    const pageSize = numberProperty(element, 'pageSize');
+    return (
+        <DataTable
+            data-scene-id={element.id}
+            value={rows}
+            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}
+            stripedRows={booleanProperty(element, 'stripedRows', false)}
+            showGridlines={booleanProperty(element, 'showGridlines', false)}
+            size={stringProperty(element, 'size') as 'small' | 'normal' | 'large' | undefined}
+            paginator={pageSize !== undefined}
+            rows={pageSize}>
+            {columns.map((column) => (
+                <Column key={column.field} field={column.field} header={column.header} sortable={column.sortable} />
+            ))}
+        </DataTable>
+    );
+}

package/data/PrimeDataView.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 { DataView } from 'primereact/dataview';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, recordArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.
+ *
+ * DataView has no default item template, so the adapter supplies one built from the `titleField` and
+ * `descriptionField` properties. Without it every row would render empty and the component would look
+ * broken rather than unconfigured.
+ */
+export function PrimeDataView({ element }: RegisteredComponentProps) {
+    const titleField = stringProperty(element, 'titleField', 'title');
+    const descriptionField = stringProperty(element, 'descriptionField', 'description');
+    const pageSize = numberProperty(element, 'pageSize');
+    return (
+        <DataView
+            data-scene-id={element.id}
+            value={recordArrayProperty(element, 'rows')}
+            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}
+            paginator={pageSize !== undefined}
+            rows={pageSize}
+            itemTemplate={(row: Record<string, unknown>) => (
+                <div className='flex flex-col gap-1 p-3'>
+                    <span className='font-semibold'>{String(row[titleField] ?? '')}</span>
+                    <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>
+                </div>
+            )}
+        />
+    );
+}