@cratis/scene.primereact 0.1.0

package/primeReactComponents.ts

@@ -0,0 +1,200 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentRegistry, componentRegistryKey } from '@cratis/scene.react';
+import { PrimeButton, PrimeButtonGroup, PrimeSpeedDial, PrimeSplitButton } from './button';
+import {
+    PrimeColumn,
+    PrimeDataTable,
+    PrimeDataView,
+    PrimeOrderList,
+    PrimeOrganizationChart,
+    PrimePaginator,
+    PrimePickList,
+    PrimeTimeline,
+    PrimeTree,
+    PrimeTreeTable,
+    PrimeVirtualScroller,
+} from './data';
+import {
+    PrimeAutoComplete,
+    PrimeCalendar,
+    PrimeCascadeSelect,
+    PrimeCheckbox,
+    PrimeChips,
+    PrimeColorPicker,
+    PrimeDropdown,
+    PrimeFloatLabel,
+    PrimeIconField,
+    PrimeInputMask,
+    PrimeInputNumber,
+    PrimeInputText,
+    PrimeInputTextarea,
+    PrimeKnob,
+    PrimeListBox,
+    PrimeMultiSelect,
+    PrimePassword,
+    PrimeRadioButton,
+    PrimeRating,
+    PrimeSelectButton,
+    PrimeSlider,
+    PrimeToggleSwitch,
+    PrimeTreeSelect,
+} from './form';
+import { PrimeCarousel, PrimeGalleria, PrimeImage } from './media';
+import {
+    PrimeBreadcrumb,
+    PrimeContextMenu,
+    PrimeDock,
+    PrimeMegaMenu,
+    PrimeMenu,
+    PrimeMenubar,
+    PrimePanelMenu,
+    PrimeSteps,
+    PrimeTabMenu,
+    PrimeTieredMenu,
+} from './menu';
+import { PrimeInlineMessage, PrimeMessage, PrimeToast } from './messages';
+import {
+    PrimeAvatar,
+    PrimeBadge,
+    PrimeBlockUI,
+    PrimeChip,
+    PrimeInplace,
+    PrimeProgressBar,
+    PrimeProgressSpinner,
+    PrimeScrollTop,
+    PrimeSkeleton,
+    PrimeTag,
+    PrimeTerminal,
+} from './misc';
+import { PrimeConfirmDialog, PrimeDialog, PrimeOverlayPanel, PrimeSidebar, PrimeTooltip } from './overlay';
+import {
+    PrimeAccordion,
+    PrimeCard,
+    PrimeDivider,
+    PrimeFieldset,
+    PrimePanel,
+    PrimeScrollPanel,
+    PrimeSplitter,
+    PrimeStepper,
+    PrimeTabView,
+    PrimeToolbar,
+} from './panel';
+import { PrimeAction, PrimeField, PrimeSection, PrimeSummary, PrimeText, PrimeTitle } from './screen';
+
+/**
+ * The `PrimeReact` package's component registry - every abstract name this package answers to, mapped to
+ * the adapter that renders it.
+ *
+ * Three of these names - `text`, `button` and `card` - are deliberately the same ones `core` declares.
+ * That is not a collision to be avoided but the mechanism working as intended: a `ui profile` listing
+ * `core` and then `PrimeReact` resolves those names here and records that `core` was shadowed, so an
+ * existing screen gets real themed components without being edited.
+ *
+ * Seven more - `table`, `column`, `title`, `field`, `section`, `summary` and `action` - are the names
+ * Screenplay's screen vocabulary emits as directive kinds. Declaring them means a screen compiled from a
+ * `.play` file renders through this package directly, rather than through a translation layer that would
+ * have to be kept in step with the compiler.
+ *
+ * `table` and `dataTable` share one adapter on purpose: they are the same component under two names a
+ * screen might reasonably use, and duplicating the implementation would let the two drift.
+ */
+export const primeReactComponents: ComponentRegistry = {
+    [componentRegistryKey('PrimeReact', 'inputText')]: PrimeInputText,
+    [componentRegistryKey('PrimeReact', 'inputTextarea')]: PrimeInputTextarea,
+    [componentRegistryKey('PrimeReact', 'inputNumber')]: PrimeInputNumber,
+    [componentRegistryKey('PrimeReact', 'password')]: PrimePassword,
+    [componentRegistryKey('PrimeReact', 'inputMask')]: PrimeInputMask,
+    [componentRegistryKey('PrimeReact', 'floatLabel')]: PrimeFloatLabel,
+    [componentRegistryKey('PrimeReact', 'iconField')]: PrimeIconField,
+    [componentRegistryKey('PrimeReact', 'dropdown')]: PrimeDropdown,
+    [componentRegistryKey('PrimeReact', 'multiSelect')]: PrimeMultiSelect,
+    [componentRegistryKey('PrimeReact', 'listBox')]: PrimeListBox,
+    [componentRegistryKey('PrimeReact', 'selectButton')]: PrimeSelectButton,
+    [componentRegistryKey('PrimeReact', 'checkbox')]: PrimeCheckbox,
+    [componentRegistryKey('PrimeReact', 'radioButton')]: PrimeRadioButton,
+    [componentRegistryKey('PrimeReact', 'toggleSwitch')]: PrimeToggleSwitch,
+    [componentRegistryKey('PrimeReact', 'slider')]: PrimeSlider,
+    [componentRegistryKey('PrimeReact', 'rating')]: PrimeRating,
+    [componentRegistryKey('PrimeReact', 'knob')]: PrimeKnob,
+    [componentRegistryKey('PrimeReact', 'calendar')]: PrimeCalendar,
+    [componentRegistryKey('PrimeReact', 'colorPicker')]: PrimeColorPicker,
+    [componentRegistryKey('PrimeReact', 'chips')]: PrimeChips,
+    [componentRegistryKey('PrimeReact', 'autoComplete')]: PrimeAutoComplete,
+    [componentRegistryKey('PrimeReact', 'treeSelect')]: PrimeTreeSelect,
+    [componentRegistryKey('PrimeReact', 'cascadeSelect')]: PrimeCascadeSelect,
+
+    [componentRegistryKey('PrimeReact', 'button')]: PrimeButton,
+    [componentRegistryKey('PrimeReact', 'splitButton')]: PrimeSplitButton,
+    [componentRegistryKey('PrimeReact', 'speedDial')]: PrimeSpeedDial,
+    [componentRegistryKey('PrimeReact', 'buttonGroup')]: PrimeButtonGroup,
+
+    [componentRegistryKey('PrimeReact', 'dataTable')]: PrimeDataTable,
+    [componentRegistryKey('PrimeReact', 'table')]: PrimeDataTable,
+    [componentRegistryKey('PrimeReact', 'column')]: PrimeColumn,
+    [componentRegistryKey('PrimeReact', 'dataView')]: PrimeDataView,
+    [componentRegistryKey('PrimeReact', 'tree')]: PrimeTree,
+    [componentRegistryKey('PrimeReact', 'treeTable')]: PrimeTreeTable,
+    [componentRegistryKey('PrimeReact', 'timeline')]: PrimeTimeline,
+    [componentRegistryKey('PrimeReact', 'paginator')]: PrimePaginator,
+    [componentRegistryKey('PrimeReact', 'orderList')]: PrimeOrderList,
+    [componentRegistryKey('PrimeReact', 'pickList')]: PrimePickList,
+    [componentRegistryKey('PrimeReact', 'organizationChart')]: PrimeOrganizationChart,
+    [componentRegistryKey('PrimeReact', 'virtualScroller')]: PrimeVirtualScroller,
+
+    [componentRegistryKey('PrimeReact', 'card')]: PrimeCard,
+    [componentRegistryKey('PrimeReact', 'panel')]: PrimePanel,
+    [componentRegistryKey('PrimeReact', 'accordion')]: PrimeAccordion,
+    [componentRegistryKey('PrimeReact', 'fieldset')]: PrimeFieldset,
+    [componentRegistryKey('PrimeReact', 'divider')]: PrimeDivider,
+    [componentRegistryKey('PrimeReact', 'splitter')]: PrimeSplitter,
+    [componentRegistryKey('PrimeReact', 'scrollPanel')]: PrimeScrollPanel,
+    [componentRegistryKey('PrimeReact', 'tabView')]: PrimeTabView,
+    [componentRegistryKey('PrimeReact', 'toolbar')]: PrimeToolbar,
+    [componentRegistryKey('PrimeReact', 'stepper')]: PrimeStepper,
+
+    [componentRegistryKey('PrimeReact', 'dialog')]: PrimeDialog,
+    [componentRegistryKey('PrimeReact', 'confirmDialog')]: PrimeConfirmDialog,
+    [componentRegistryKey('PrimeReact', 'overlayPanel')]: PrimeOverlayPanel,
+    [componentRegistryKey('PrimeReact', 'sidebar')]: PrimeSidebar,
+    [componentRegistryKey('PrimeReact', 'tooltip')]: PrimeTooltip,
+
+    [componentRegistryKey('PrimeReact', 'menu')]: PrimeMenu,
+    [componentRegistryKey('PrimeReact', 'menubar')]: PrimeMenubar,
+    [componentRegistryKey('PrimeReact', 'breadcrumb')]: PrimeBreadcrumb,
+    [componentRegistryKey('PrimeReact', 'tabMenu')]: PrimeTabMenu,
+    [componentRegistryKey('PrimeReact', 'steps')]: PrimeSteps,
+    [componentRegistryKey('PrimeReact', 'tieredMenu')]: PrimeTieredMenu,
+    [componentRegistryKey('PrimeReact', 'panelMenu')]: PrimePanelMenu,
+    [componentRegistryKey('PrimeReact', 'contextMenu')]: PrimeContextMenu,
+    [componentRegistryKey('PrimeReact', 'megaMenu')]: PrimeMegaMenu,
+    [componentRegistryKey('PrimeReact', 'dock')]: PrimeDock,
+
+    [componentRegistryKey('PrimeReact', 'message')]: PrimeMessage,
+    [componentRegistryKey('PrimeReact', 'inlineMessage')]: PrimeInlineMessage,
+    [componentRegistryKey('PrimeReact', 'toast')]: PrimeToast,
+
+    [componentRegistryKey('PrimeReact', 'image')]: PrimeImage,
+    [componentRegistryKey('PrimeReact', 'galleria')]: PrimeGalleria,
+    [componentRegistryKey('PrimeReact', 'carousel')]: PrimeCarousel,
+
+    [componentRegistryKey('PrimeReact', 'avatar')]: PrimeAvatar,
+    [componentRegistryKey('PrimeReact', 'badge')]: PrimeBadge,
+    [componentRegistryKey('PrimeReact', 'chip')]: PrimeChip,
+    [componentRegistryKey('PrimeReact', 'tag')]: PrimeTag,
+    [componentRegistryKey('PrimeReact', 'progressBar')]: PrimeProgressBar,
+    [componentRegistryKey('PrimeReact', 'progressSpinner')]: PrimeProgressSpinner,
+    [componentRegistryKey('PrimeReact', 'skeleton')]: PrimeSkeleton,
+    [componentRegistryKey('PrimeReact', 'scrollTop')]: PrimeScrollTop,
+    [componentRegistryKey('PrimeReact', 'blockUI')]: PrimeBlockUI,
+    [componentRegistryKey('PrimeReact', 'inplace')]: PrimeInplace,
+    [componentRegistryKey('PrimeReact', 'terminal')]: PrimeTerminal,
+
+    [componentRegistryKey('PrimeReact', 'text')]: PrimeText,
+    [componentRegistryKey('PrimeReact', 'title')]: PrimeTitle,
+    [componentRegistryKey('PrimeReact', 'field')]: PrimeField,
+    [componentRegistryKey('PrimeReact', 'section')]: PrimeSection,
+    [componentRegistryKey('PrimeReact', 'summary')]: PrimeSummary,
+    [componentRegistryKey('PrimeReact', 'action')]: PrimeAction,
+};

package/primeReactPackage.ts

@@ -0,0 +1,83 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageKind, ScenePackage } from '@cratis/scene.model';
+import { ScenePackageBundle } from '@cratis/scene.react';
+import { primeReactComponents } from './primeReactComponents';
+import { primeReactThemeNames, primeReactThemes } from './theme';
+
+/**
+ * The `PrimeReact` package's declaration - what a `ui profile` lists by name and what a
+ * `PackageDependency` refers to.
+ *
+ * The component list is written out rather than derived from the registry, on purpose. A manifest is
+ * read by Stage's build and Studio's design-time queries *without loading a single component*, so it has
+ * to stand on its own as the statement of what this package offers. Keeping it as its own list is also
+ * what gives `validatePackageBundle` something real to check: two independently maintained lists that
+ * must agree, rather than one list compared against itself.
+ */
+export const primeReactPackageManifest: ScenePackage = {
+    name: 'PrimeReact',
+    version: '10.9.8',
+    kind: PackageKind.ComponentLibrary,
+
+    /**
+     * PrimeReact's own components need nothing from Tailwind - they are skinned by a compiled theme
+     * stylesheet. The dependency is here because *this package's wrappers* use Tailwind utility classes
+     * for the layout around them: the row a checkbox and its label sit on, the column a radio group
+     * stacks into, the grid a summary lays its pairs out in. A profile that activates this package
+     * without Tailwind renders those wrappers unstyled, so declaring it is what makes the profile picker
+     * offer Tailwind alongside PrimeReact instead of leaving the gap to be discovered on screen.
+     */
+    dependencies: [{ name: 'Tailwind' }],
+
+    components: [
+        'inputText', 'inputTextarea', 'inputNumber', 'password', 'inputMask', 'floatLabel', 'iconField', 'dropdown', 'multiSelect',
+        'listBox', 'selectButton', 'checkbox', 'radioButton', 'toggleSwitch', 'slider', 'rating', 'knob', 'calendar', 'colorPicker',
+        'chips', 'autoComplete', 'treeSelect', 'cascadeSelect', 'button', 'splitButton', 'speedDial', 'buttonGroup', 'dataTable', 'table',
+        'column', 'dataView', 'tree', 'treeTable', 'timeline', 'paginator', 'orderList', 'pickList', 'organizationChart', 'virtualScroller',
+        'card', 'panel', 'accordion', 'fieldset', 'divider', 'splitter', 'scrollPanel', 'tabView', 'toolbar', 'stepper', 'dialog',
+        'confirmDialog', 'overlayPanel', 'sidebar', 'tooltip', 'menu', 'menubar', 'breadcrumb', 'tabMenu', 'steps', 'tieredMenu',
+        'panelMenu', 'contextMenu', 'megaMenu', 'dock', 'message', 'inlineMessage', 'toast', 'image', 'galleria', 'carousel', 'avatar',
+        'badge', 'chip', 'tag', 'progressBar', 'progressSpinner', 'skeleton', 'scrollTop', 'blockUI', 'inplace', 'terminal', 'text',
+        'title', 'field', 'section', 'summary', 'action',
+    ],
+
+    /**
+     * Empty, and it stays empty. A layout is an application's base navigational look - one per
+     * application - and choosing it is a decision about the product, not about which widgets are
+     * available. A component library supplies the vocabulary a layout is built *from*; a
+     * {@link PackageKind.Blueprint} package supplies the layout itself.
+     */
+    layouts: [],
+
+    /**
+     * Empty for the same reason `layouts` is. A screen template is a reusable page shape at module,
+     * feature or slice level - "list with filters and a detail pane" - and it is composed *out of* the
+     * names declared above. Shipping one here would mean this package had opinions about how a screen is
+     * arranged, which is a Blueprint's job and not a component library's.
+     */
+    screenTemplates: [],
+
+    /**
+     * Empty, as above: a dialog template is a reusable dialog shape, composed from these components by a
+     * Blueprint package rather than provided by the library the components come from.
+     */
+    dialogTemplates: [],
+
+    themes: primeReactThemeNames,
+
+    displayName: 'PrimeReact',
+    description: 'PrimeReact 10 components and its free PrimeTek themes, mapped onto Scene\'s abstract component names.',
+    module: '@cratis/scene.primereact',
+};
+
+/**
+ * The `PrimeReact` package as a loadable bundle - the manifest plus the React components and themes
+ * behind the names it declares.
+ */
+export const primeReactPackage: ScenePackageBundle = {
+    manifest: primeReactPackageManifest,
+    components: primeReactComponents,
+    themes: primeReactThemes,
+};

package/primeReactTheme.css

@@ -0,0 +1,88 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/*
+ * Scene design tokens <-> PrimeReact 10 CSS variables.
+ *
+ * This is the seam that lets layout and component CSS stay library-agnostic. Everything Scene writes -
+ * a layout's grid, this package's own wrappers, a screen's own styling - reads `--scene-*` and never
+ * names a PrimeReact variable. This file is the only place the two vocabularies meet, so swapping the
+ * component library underneath a screen is a matter of shipping a different bridge, not of editing
+ * every rule that mentioned a color.
+ *
+ * It is the same indirection `@cratis/components/tokens.css` uses to span PrimeReact major versions -
+ * one abstract token name resolving to whatever the underlying library calls it this year.
+ *
+ * The bridge runs in both directions, and the order matters:
+ *
+ *   1. On `:root`, every Scene token falls back to the loaded PrimeReact theme. An application that
+ *      loads `lara-light-blue/theme.css` and applies no Scene theme at all still gets meaningful values
+ *      for every `--scene-*` token.
+ *
+ *   2. Inside a Scene theme root, the Scene tokens are fed *back* onto PrimeReact's variables, so a
+ *      Scene theme re-tints PrimeReact's own components and not only Scene's wrappers.
+ *
+ * The second rule is deliberately scoped to `[data-scene-theme-root]` and must never be moved to
+ * `:root`. Custom properties that reference each other in a cycle are invalid at computed-value time and
+ * resolve to nothing, so `--scene-primary-color: var(--primary-color)` and
+ * `--primary-color: var(--scene-primary-color)` on the *same* element would silently blank both. Split
+ * across two elements there is no cycle: `SceneThemeProvider` writes the theme's tokens as inline styles
+ * on the theme root, which is a literal value with no dependency, and the fallbacks on `:root` are
+ * already resolved by the time they inherit down.
+ *
+ * The token vocabulary is small on purpose. Every Scene package has to agree on it, and a vocabulary
+ * that grows per package is one no package can rely on. Thirteen tokens: a primary color and its
+ * contrast, five surfaces, two text colors, two highlight colors, a radius and a focus ring.
+ */
+
+:root {
+    /* Primary brand */
+    --scene-primary-color: var(--primary-color);
+    --scene-primary-contrast-color: var(--primary-color-text);
+
+    /* Surfaces */
+    --scene-surface-background: var(--surface-ground);
+    --scene-surface-card: var(--surface-card);
+    --scene-surface-border: var(--surface-border);
+    --scene-surface-hover: var(--surface-hover);
+    --scene-surface-overlay: var(--surface-overlay);
+
+    /* Text */
+    --scene-text-color: var(--text-color);
+    --scene-text-muted-color: var(--text-color-secondary);
+
+    /* Selection */
+    --scene-highlight-background: var(--highlight-bg);
+    --scene-highlight-color: var(--highlight-text-color);
+
+    /* Geometry and focus */
+    --scene-content-border-radius: var(--border-radius);
+    --scene-focus-ring: var(--focus-ring);
+}
+
+[data-scene-theme-root] {
+    --primary-color: var(--scene-primary-color);
+    --primary-color-text: var(--scene-primary-contrast-color);
+
+    --surface-ground: var(--scene-surface-background);
+    --surface-card: var(--scene-surface-card);
+    --surface-border: var(--scene-surface-border);
+    --surface-hover: var(--scene-surface-hover);
+    --surface-overlay: var(--scene-surface-overlay);
+
+    --text-color: var(--scene-text-color);
+    --text-color-secondary: var(--scene-text-muted-color);
+
+    --highlight-bg: var(--scene-highlight-background);
+    --highlight-text-color: var(--scene-highlight-color);
+
+    --border-radius: var(--scene-content-border-radius);
+    --focus-ring: var(--scene-focus-ring);
+
+    /*
+     * A themed root paints itself, so a preview embedded in a host page reads as the theme rather than
+     * as the host's background showing through between components.
+     */
+    background: var(--scene-surface-background);
+    color: var(--scene-text-color);
+}

package/properties.ts

@@ -0,0 +1,134 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneElement } from '@cratis/scene.model';
+import { SelectOption } from './SelectOption';
+
+/**
+ * Reads a string configuration value off a Scene element.
+ *
+ * `SceneElement.properties` is `Record<string, unknown>` because a screen's properties come from
+ * authored model data, not from a compiler that knows this package's expectations. Every adapter
+ * therefore has to narrow before it can use a value, and doing that with a cast would defeat the point -
+ * a mistyped property would sail through and blow up inside PrimeReact instead of quietly falling back
+ * here. These helpers are the single narrowing point, so a wrong type behaves exactly like an absent
+ * one everywhere.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @param fallback The value to use when the property is missing or is not a string.
+ * @returns The string value, or `fallback` (`undefined` when none was given).
+ */
+export function stringProperty(element: SceneElement, name: string): string | undefined;
+export function stringProperty(element: SceneElement, name: string, fallback: string): string;
+export function stringProperty(element: SceneElement, name: string, fallback?: string): string | undefined {
+    const value = element.properties[name];
+    return typeof value === 'string' ? value : fallback;
+}
+
+/**
+ * Reads a boolean configuration value off a Scene element.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @param fallback The value to use when the property is missing or is not a boolean.
+ * @returns The boolean value, or `fallback` (`undefined` when none was given).
+ */
+export function booleanProperty(element: SceneElement, name: string): boolean | undefined;
+export function booleanProperty(element: SceneElement, name: string, fallback: boolean): boolean;
+export function booleanProperty(element: SceneElement, name: string, fallback?: boolean): boolean | undefined {
+    const value = element.properties[name];
+    return typeof value === 'boolean' ? value : fallback;
+}
+
+/**
+ * Reads a numeric configuration value off a Scene element.
+ *
+ * `NaN` is rejected alongside non-numbers: it is a number by `typeof` but never a usable size, count or
+ * bound, and letting it through would surface as an unexplained blank component rather than a fallback.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @param fallback The value to use when the property is missing or is not a usable number.
+ * @returns The numeric value, or `fallback` (`undefined` when none was given).
+ */
+export function numberProperty(element: SceneElement, name: string): number | undefined;
+export function numberProperty(element: SceneElement, name: string, fallback: number): number;
+export function numberProperty(element: SceneElement, name: string, fallback?: number): number | undefined {
+    const value = element.properties[name];
+    return typeof value === 'number' && !Number.isNaN(value) ? value : fallback;
+}
+
+/**
+ * Reads an array configuration value off a Scene element, as raw entries.
+ *
+ * Always returns an array - an absent or wrongly typed property becomes an empty one - because every
+ * caller is about to map over it, and a component rendering nothing is a far better failure than one
+ * throwing on `undefined.map`.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @returns The entries, or an empty array when the property is missing or is not an array.
+ */
+export function arrayProperty(element: SceneElement, name: string): unknown[] {
+    const value = element.properties[name];
+    return Array.isArray(value) ? value : [];
+}
+
+/**
+ * Reads an array of strings off a Scene element, dropping any entry that is not one.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @returns The string entries, in order.
+ */
+export function stringArrayProperty(element: SceneElement, name: string): string[] {
+    return arrayProperty(element, name).filter((entry): entry is string => typeof entry === 'string');
+}
+
+/**
+ * Reads an array of objects off a Scene element, dropping any entry that is not one.
+ *
+ * This is the shape row data, column definitions and menu items all arrive in, so it is the common
+ * bottom step every structured reader in this package builds on.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @returns The object entries, in order.
+ */
+export function recordArrayProperty(element: SceneElement, name: string): Record<string, unknown>[] {
+    return arrayProperty(element, name).filter(
+        (entry): entry is Record<string, unknown> => typeof entry === 'object' && entry !== undefined && entry !== null && !Array.isArray(entry)
+    );
+}
+
+/**
+ * Reads a selection component's options off a Scene element, normalizing both shapes a screen may use.
+ *
+ * A screen written by hand tends to say `options: ['Draft', 'Published']`; one generated from a model
+ * says `options: [{ label: 'Draft', value: 'draft' }]`. Both are reasonable, so both are accepted and
+ * flattened to {@link SelectOption} - an entry with only a label uses that label as its value, which is
+ * exactly what the shorthand means.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name.
+ * @returns The normalized options, in order, skipping entries that carry no usable label.
+ */
+export function optionsProperty(element: SceneElement, name: string): SelectOption[] {
+    const options: SelectOption[] = [];
+    for (const entry of arrayProperty(element, name)) {
+        if (typeof entry === 'string') {
+            options.push({ label: entry, value: entry });
+            continue;
+        }
+
+        if (typeof entry !== 'object' || entry === undefined || entry === null || Array.isArray(entry)) continue;
+
+        const record = entry as Record<string, unknown>;
+        const label = typeof record.label === 'string' ? record.label : undefined;
+        const value = typeof record.value === 'string' ? record.value : label;
+        if (label !== undefined && value !== undefined) options.push({ label, value });
+    }
+
+    return options;
+}

package/screen/PrimeAction.tsx

@@ -0,0 +1,37 @@
+// 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:action` component - one of Screenplay's screen directives: something the user can do.
+ *
+ * A button, but not the same adapter as `button`. Screenplay describes an action by its *intent* - is
+ * this the main thing to do here, a secondary one, a destructive one - and that vocabulary is what a
+ * screen author writes. Translating intent to PrimeReact's `severity` here keeps the mapping in one
+ * place, so a change to how destructive actions look is one edit rather than one per screen.
+ */
+const severityForIntent: Record<string, 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined> = {
+    primary: undefined,
+    secondary: 'secondary',
+    destructive: 'danger',
+    danger: 'danger',
+    positive: 'success',
+    success: 'success',
+};
+
+export function PrimeAction({ element }: RegisteredComponentProps) {
+    const intent = stringProperty(element, 'intent', 'primary');
+    return (
+        <Button
+            data-scene-id={element.id}
+            label={stringProperty(element, 'label', '')}
+            icon={stringProperty(element, 'icon')}
+            severity={severityForIntent[intent]}
+            outlined={intent === 'secondary'}
+            disabled={booleanProperty(element, 'disabled', false)}
+        />
+    );
+}

package/screen/PrimeField.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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:field` component - one of Screenplay's screen directives: a labeled value.
+ *
+ * The label is bound to the value with `aria-labelledby` rather than left as two adjacent pieces of text,
+ * so the pair is announced as one thing. When the `content` slot carries an editor, that editor is shown
+ * instead of the static value - which is what lets the same directive serve a detail view and a form.
+ */
+export function PrimeField({ element, slots }: RegisteredComponentProps) {
+    const labelId = `${element.id}-label`;
+    return (
+        <div data-scene-id={element.id} className='flex flex-col gap-1'>
+            <span id={labelId} className='text-sm' style={{ color: 'var(--scene-text-muted-color)' }}>
+                {stringProperty(element, 'label', '')}
+            </span>
+            <div aria-labelledby={labelId} style={{ color: 'var(--scene-text-color)' }}>
+                {slots.content?.length ? slots.content : stringProperty(element, 'value', '')}
+            </div>
+        </div>
+    );
+}

package/screen/PrimeSection.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 { Divider } from 'primereact/divider';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:section` component - one of Screenplay's screen directives: a titled grouping.
+ *
+ * A real `<section>` with a heading, not a styled `div`: the grouping is the point of the directive, and
+ * only the semantic element actually creates one for assistive technology. The rule under the heading is
+ * PrimeReact's `Divider`, so the separation is themed with everything else rather than hard-coded.
+ */
+export function PrimeSection({ element, slots }: RegisteredComponentProps) {
+    const title = stringProperty(element, 'title');
+    return (
+        <section data-scene-id={element.id} className='flex flex-col'>
+            {title !== undefined && (
+                <>
+                    <h2 className='text-lg font-semibold' style={{ color: 'var(--scene-text-color)' }}>
+                        {title}
+                    </h2>
+                    <Divider />
+                </>
+            )}
+            <div className='flex flex-col gap-3'>{slots.content}</div>
+        </section>
+    );
+}

package/screen/PrimeSummary.tsx

@@ -0,0 +1,33 @@
+// 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 { recordArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:summary` component - one of Screenplay's screen directives: the headline facts about
+ * one thing.
+ *
+ * Rendered as a description list inside a card. A description list is the correct element for
+ * label/value pairs and gets the pairing across to a screen reader for free, which a grid of `div`s does
+ * not.
+ */
+export function PrimeSummary({ element, slots }: RegisteredComponentProps) {
+    const items = recordArrayProperty(element, 'items');
+    return (
+        <Card data-scene-id={element.id} title={stringProperty(element, 'title')}>
+            <dl className='grid grid-cols-2 gap-2'>
+                {items.map((item, index) => (
+                    <div key={index} className='flex flex-col'>
+                        <dt className='text-sm' style={{ color: 'var(--scene-text-muted-color)' }}>
+                            {String(item.label ?? '')}
+                        </dt>
+                        <dd style={{ color: 'var(--scene-text-color)' }}>{String(item.value ?? '')}</dd>
+                    </div>
+                ))}
+            </dl>
+            {slots.content}
+        </Card>
+    );
+}

package/screen/PrimeText.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 { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../properties';
+
+/**
+ * The `PrimeReact:text` component - a run of prose.
+ *
+ * PrimeReact has no text primitive, so this one is written directly rather than wrapped. It is still
+ * worth shipping: it claims the bare name `core` also declares, and unlike core's unstyled span it picks
+ * up the active theme's type color and muting through the Scene token bridge. That is the smallest
+ * possible demonstration of why override priority exists - the same screen, the same name, better output
+ * once a component library is in the profile.
+ */
+export function PrimeText({ element, slots }: RegisteredComponentProps) {
+    const muted = booleanProperty(element, 'muted', false);
+    const strong = booleanProperty(element, 'strong', false);
+    return (
+        <span
+            data-scene-id={element.id}
+            className={`${muted ? 'opacity-75' : ''} ${strong ? 'font-semibold' : ''}`.trim()}
+            style={{ color: muted ? 'var(--scene-text-muted-color)' : 'var(--scene-text-color)' }}>
+            {stringProperty(element, 'text', '')}
+            {slots.content}
+        </span>
+    );
+}