@cratis/scene.primereact 1.0.0 → 2.0.0

package/panel/PrimeTabView.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { TabPanel, TabView } from 'primereact/tabview';
+import { Tabs } from 'primereact/tabs';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { numberProperty, stringArrayProperty } from '../properties';
 
@@ -11,19 +11,39 @@ import { numberProperty, stringArrayProperty } from '../properties';
  * Pairs a `headers` property with the `content` slot by position, for the same reason
  * {@link PrimeAccordion} does.
  *
- * In PrimeReact 11 `TabView` and `TabPanel` are replaced by a single `Tabs` component.
+ * PrimeReact 11 merged the v10 `primereact/tabview` and `primereact/tabpanel` modules into a single
+ * compositional `primereact/tabs`, where the strip of tabs and the stack of panels are two sibling
+ * subtrees joined by matching `value`s rather than one list of `TabPanel` elements read twice. The
+ * adapter therefore walks the same range twice - once for `Tabs.List`, once for `Tabs.Panels` - and uses
+ * the index as the shared value. `Tabs.Indicator` is composed in explicitly because v11 renders no part
+ * it was not given, and without it the active tab gets no underline at all.
+ *
+ * `activeIndex` is passed as `defaultValue` rather than `value` for the reason described on
+ * {@link PrimeAccordion}: a controlled value would make every tab unselectable.
+ *
+ * The abstract Scene name stays `tabView` so existing screens keep resolving.
  */
 export function PrimeTabView({ element, slots }: RegisteredComponentProps) {
     const headers = stringArrayProperty(element, 'headers');
     const bodies = slots.content ?? [];
     const count = Math.max(headers.length, bodies.length);
     return (
-        <TabView data-scene-id={element.id} activeIndex={numberProperty(element, 'activeIndex', 0)}>
-            {Array.from({ length: count }, (_, index) => (
-                <TabPanel key={index} header={headers[index] ?? `Tab ${index + 1}`}>
-                    {bodies[index]}
-                </TabPanel>
-            ))}
-        </TabView>
+        <Tabs.Root data-scene-id={element.id} defaultValue={String(numberProperty(element, 'activeIndex', 0))}>
+            <Tabs.List>
+                {Array.from({ length: count }, (_, index) => (
+                    <Tabs.Tab key={index} value={String(index)}>
+                        {headers[index] ?? `Tab ${index + 1}`}
+                    </Tabs.Tab>
+                ))}
+                <Tabs.Indicator />
+            </Tabs.List>
+            <Tabs.Panels>
+                {Array.from({ length: count }, (_, index) => (
+                    <Tabs.Panel key={index} value={String(index)}>
+                        {bodies[index]}
+                    </Tabs.Panel>
+                ))}
+            </Tabs.Panels>
+        </Tabs.Root>
     );
 }

package/panel/PrimeToolbar.tsx

@@ -9,7 +9,19 @@ import { RegisteredComponentProps } from '@cratis/scene.react';
  *
  * The three regions map onto three named slots rather than properties, because what goes into them is
  * other components - buttons, a search field, a menu - not values.
+ *
+ * PrimeReact 11 turned those regions from `start` / `center` / `end` render props into `Toolbar.Start`,
+ * `Toolbar.Center` and `Toolbar.End` parts, which happens to be a closer match for what this adapter was
+ * already doing: each region is now children rather than a prop holding elements. All three are always
+ * rendered, so the flex layout keeps its three anchors and a toolbar with only an end region still pins
+ * that region to the end instead of collapsing it leftwards.
  */
 export function PrimeToolbar({ element, slots }: RegisteredComponentProps) {
-    return <Toolbar data-scene-id={element.id} start={slots.start} center={slots.center} end={slots.end ?? slots.content} />;
+    return (
+        <Toolbar.Root data-scene-id={element.id}>
+            <Toolbar.Start>{slots.start}</Toolbar.Start>
+            <Toolbar.Center>{slots.center}</Toolbar.Center>
+            <Toolbar.End>{slots.end ?? slots.content}</Toolbar.End>
+        </Toolbar.Root>
+    );
 }

package/primeReactComponents.ts

@@ -13,20 +13,16 @@ import {
     PrimePickList,
     PrimeTimeline,
     PrimeTree,
-    PrimeTreeTable,
-    PrimeVirtualScroller,
 } from './data';
 import {
     PrimeAutoComplete,
     PrimeCalendar,
-    PrimeCascadeSelect,
     PrimeCheckbox,
     PrimeChips,
     PrimeColorPicker,
     PrimeDropdown,
     PrimeFloatLabel,
     PrimeIconField,
-    PrimeInputMask,
     PrimeInputNumber,
     PrimeInputText,
     PrimeInputTextarea,
@@ -105,7 +101,6 @@ export const primeReactComponents: ComponentRegistry = {
     [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,
@@ -123,7 +118,6 @@ export const primeReactComponents: ComponentRegistry = {
     [componentRegistryKey('PrimeReact', 'chips')]: PrimeChips,
     [componentRegistryKey('PrimeReact', 'autoComplete')]: PrimeAutoComplete,
     [componentRegistryKey('PrimeReact', 'treeSelect')]: PrimeTreeSelect,
-    [componentRegistryKey('PrimeReact', 'cascadeSelect')]: PrimeCascadeSelect,
 
     [componentRegistryKey('PrimeReact', 'button')]: PrimeButton,
     [componentRegistryKey('PrimeReact', 'splitButton')]: PrimeSplitButton,
@@ -135,13 +129,11 @@ export const primeReactComponents: ComponentRegistry = {
     [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,

package/primeReactPackage.ts

@@ -18,12 +18,13 @@ import { primeReactThemeNames, primeReactThemes } from './theme';
  */
 export const primeReactPackageManifest: ScenePackage = {
     name: 'PrimeReact',
-    version: '10.9.8',
+    version: '11.1.0',
     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
+     * PrimeReact's own components need nothing from Tailwind - they are skinned by the `--p-*` custom
+     * properties the active `@primeuix/themes` preset emits. 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
@@ -32,10 +33,10 @@ export const primeReactPackageManifest: ScenePackage = {
     dependencies: [{ name: 'Tailwind' }],
 
     components: [
-        'inputText', 'inputTextarea', 'inputNumber', 'password', 'inputMask', 'floatLabel', 'iconField', 'dropdown', 'multiSelect',
+        'inputText', 'inputTextarea', 'inputNumber', 'password', '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',
+        'chips', 'autoComplete', 'treeSelect', 'button', 'splitButton', 'speedDial', 'buttonGroup', 'dataTable', 'table',
+        'column', 'dataView', 'tree', 'timeline', 'paginator', 'orderList', 'pickList', 'organizationChart',
         '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',
@@ -68,7 +69,7 @@ export const primeReactPackageManifest: ScenePackage = {
     themes: primeReactThemeNames,
 
     displayName: 'PrimeReact',
-    description: 'PrimeReact 10 components and its free PrimeTek themes, mapped onto Scene\'s abstract component names.',
+    description: 'PrimeReact 11 components and PrimeTek\'s @primeuix/themes presets, mapped onto Scene\'s abstract component names.',
     module: '@cratis/scene.primereact',
 };
 

package/primeReactTheme.css

@@ -2,7 +2,7 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /*
- * Scene design tokens <-> PrimeReact 10 CSS variables.
+ * Scene design tokens <-> PrimeReact 11 design tokens.
  *
  * 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
@@ -13,19 +13,28 @@
  * 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 PrimeReact 11 port made this file *smaller*, and the reason is worth recording. In v10 the right
+ * hand side of each mapping was whatever the theme's SCSS happened to have called it, so the bridge had
+ * to know an ad-hoc vocabulary: `--primary-color` but `--primary-color-text`, `--surface-ground` but
+ * `--surface-card`, `--highlight-bg` but `--highlight-text-color`, `--text-color-secondary`,
+ * `--border-radius`. Those names shared no scheme and could only be learned by reading the compiled
+ * stylesheets. In v11 `@primeuix/styled` emits one flat, systematic `--p-*` namespace derived from the
+ * preset's token paths, so every mapping below is the same mechanical `token.path` -> `--p-token-path`
+ * transformation. Nothing here has to be memorised any more.
+ *
  * 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.
+ *   1. On `:root`, every Scene token falls back to the active preset's `--p-*` value. An application
+ *      that hands `PrimeReactProvider` a preset 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
+ * resolve to nothing, so `--scene-primary-color: var(--p-primary-color)` and
+ * `--p-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.
@@ -37,47 +46,61 @@
 
 :root {
     /* Primary brand */
-    --scene-primary-color: var(--primary-color);
-    --scene-primary-contrast-color: var(--primary-color-text);
+    --scene-primary-color: var(--p-primary-color);
+    --scene-primary-contrast-color: var(--p-primary-contrast-color);
 
-    /* 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);
+    /*
+     * Surfaces. `content.background` is the raised surface a card or panel paints itself with; the page
+     * behind it is one step down the surface ramp, which is what `--p-surface-50` / `--p-surface-950`
+     * resolve to for a light and a dark preset respectively. Only the ground needs the light/dark split
+     * spelled out - every other token below already carries it inside the preset's own `light-dark()`.
+     */
+    --scene-surface-background: var(--p-surface-50);
+    --scene-surface-card: var(--p-content-background);
+    --scene-surface-border: var(--p-content-border-color);
+    --scene-surface-hover: var(--p-content-hover-background);
+    --scene-surface-overlay: var(--p-overlay-popover-background);
 
     /* Text */
-    --scene-text-color: var(--text-color);
-    --scene-text-muted-color: var(--text-color-secondary);
+    --scene-text-color: var(--p-text-color);
+    --scene-text-muted-color: var(--p-text-muted-color);
 
     /* Selection */
-    --scene-highlight-background: var(--highlight-bg);
-    --scene-highlight-color: var(--highlight-text-color);
+    --scene-highlight-background: var(--p-highlight-background);
+    --scene-highlight-color: var(--p-highlight-color);
 
     /* Geometry and focus */
-    --scene-content-border-radius: var(--border-radius);
-    --scene-focus-ring: var(--focus-ring);
+    --scene-content-border-radius: var(--p-content-border-radius);
+    --scene-focus-ring: var(--p-focus-ring-shadow);
+}
+
+.scene-dark {
+    /*
+     * The dark half of the ground. `usePrimeReactTheme` hands `.scene-dark` to the preset as its
+     * `darkModeSelector`, so by the time this rule matches every other `--p-*` has already flipped to its
+     * dark value on its own. The ground is the one token the bridge picks off the ramp by hand, so it is
+     * also the one the bridge has to flip by hand.
+     */
+    --scene-surface-background: var(--p-surface-950);
 }
 
 [data-scene-theme-root] {
-    --primary-color: var(--scene-primary-color);
-    --primary-color-text: var(--scene-primary-contrast-color);
+    --p-primary-color: var(--scene-primary-color);
+    --p-primary-contrast-color: 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);
+    --p-content-background: var(--scene-surface-card);
+    --p-content-border-color: var(--scene-surface-border);
+    --p-content-hover-background: var(--scene-surface-hover);
+    --p-overlay-popover-background: var(--scene-surface-overlay);
 
-    --text-color: var(--scene-text-color);
-    --text-color-secondary: var(--scene-text-muted-color);
+    --p-text-color: var(--scene-text-color);
+    --p-text-muted-color: var(--scene-text-muted-color);
 
-    --highlight-bg: var(--scene-highlight-background);
-    --highlight-text-color: var(--scene-highlight-color);
+    --p-highlight-background: var(--scene-highlight-background);
+    --p-highlight-color: var(--scene-highlight-color);
 
-    --border-radius: var(--scene-content-border-radius);
-    --focus-ring: var(--scene-focus-ring);
+    --p-content-border-radius: var(--scene-content-border-radius);
+    --p-focus-ring-shadow: var(--scene-focus-ring);
 
     /*
      * A themed root paints itself, so a preview embedded in a host page reads as the theme rather than

package/properties.ts

@@ -2,8 +2,12 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { SceneElement } from '@cratis/scene.model';
+import { PrimeSeverity } from './PrimeSeverity';
 import { SelectOption } from './SelectOption';
 
+/** Every severity PrimeReact 11 knows, so an unrecognized one can fall back rather than reach a component. */
+const severities: PrimeSeverity[] = ['secondary', 'info', 'success', 'warn', 'danger', 'help', 'contrast'];
+
 /**
  * Reads a string configuration value off a Scene element.
  *
@@ -132,3 +136,29 @@ export function optionsProperty(element: SceneElement, name: string): SelectOpti
 
     return options;
 }
+
+/**
+ * Reads a severity off a Scene element, in the vocabulary PrimeReact 11 uses.
+ *
+ * This exists because PrimeReact renamed one severity between v10 and v11 - `warning` became `warn` - and
+ * the rename is silent in the worst way. The v11 prop types are string-literal unions, so an unchanged
+ * `warning` does not fail to compile when it arrives through `stringProperty`; it simply falls through to
+ * the default color, and a screen authored against the old vocabulary loses its warning styling without
+ * anything reporting a problem.
+ *
+ * Six adapters need that translation, which is five too many to leave copied. Putting it here also keeps
+ * the promise the rest of this file makes: properties are narrowed in exactly one place, so an
+ * unrecognized value behaves the same way everywhere - like an absent one, rather than like a broken one.
+ *
+ * @param element The element whose properties to read.
+ * @param name The property name, `severity` for every current caller.
+ * @param fallback The severity to use when the property is missing or is not one PrimeReact knows.
+ * @returns The severity, or `fallback` (`undefined` when none was given).
+ */
+export function severityProperty(element: SceneElement, name: string): PrimeSeverity | undefined;
+export function severityProperty(element: SceneElement, name: string, fallback: PrimeSeverity): PrimeSeverity;
+export function severityProperty(element: SceneElement, name: string, fallback?: PrimeSeverity): PrimeSeverity | undefined {
+    const authored = stringProperty(element, name);
+    const translated = authored === 'warning' ? 'warn' : authored;
+    return severities.includes(translated as PrimeSeverity) ? (translated as PrimeSeverity) : fallback;
+}

package/screen/PrimeAction.tsx

@@ -12,8 +12,11 @@ import { booleanProperty, stringProperty } from '../properties';
  * 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.
+ *
+ * PrimeReact 11 renamed the `warning` severity to `warn`, which is why the union below is not the v10
+ * one. No intent currently maps to it, but the type has to be right for the one that eventually does.
  */
-const severityForIntent: Record<string, 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined> = {
+const severityForIntent: Record<string, 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'help' | 'contrast' | undefined> = {
     primary: undefined,
     secondary: 'secondary',
     destructive: 'danger',
@@ -22,16 +25,27 @@ const severityForIntent: Record<string, 'secondary' | 'success' | 'info' | 'warn
     success: 'success',
 };
 
+/**
+ * Renders the action.
+ *
+ * Two v10 conveniences are gone in PrimeReact 11 and are assembled here instead. `Button` no longer takes
+ * `label` and `icon` props - it renders its children - so the icon element and the label text are composed
+ * directly. And `outlined` is no longer a boolean; outlining is one of the values of `variant`.
+ *
+ * The icon is `aria-hidden` because the label already names the action; announcing a decorative glyph
+ * beside it would have a screen reader say the same thing twice.
+ */
 export function PrimeAction({ element }: RegisteredComponentProps) {
     const intent = stringProperty(element, 'intent', 'primary');
+    const icon = stringProperty(element, 'icon');
     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)}
-        />
+            variant={intent === 'secondary' ? 'outlined' : undefined}
+            disabled={booleanProperty(element, 'disabled', false)}>
+            {icon !== undefined && <i className={icon} aria-hidden='true' />}
+            {stringProperty(element, 'label', '')}
+        </Button>
     );
 }

package/screen/PrimeSummary.tsx

@@ -12,22 +12,45 @@ import { recordArrayProperty, stringProperty } from '../properties';
  * 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.
+ *
+ * PrimeReact 11 made `Card` compositional, so the v10 `<Card title=...>` form is assembled here from
+ * `Card.Root` / `Card.Body` / `Card.Caption` / `Card.Title` / `Card.Content` instead.
+ *
+ * The nesting matters and is easy to get wrong. `Card.Body` is the part that carries the padding - it is
+ * the only one of them the preset gives a `padding` token - so everything visible has to sit inside it.
+ * A title placed in a `Card.Header` instead renders flush to the card edge with no styling at all,
+ * because `header` is not a themed part: the preset's `card` tokens are exactly `root`, `body`,
+ * `caption`, `title` and `subtitle`, and `p-card-header` is v11's slot for a media image above the body.
+ *
+ * The caption is rendered only when a title was authored. v10 collapsed an absent `title` to nothing, and
+ * an empty `Card.Caption` still reserves its own gap, which would leave a stray band above a summary that
+ * simply has no heading.
  */
 export function PrimeSummary({ element, slots }: RegisteredComponentProps) {
     const items = recordArrayProperty(element, 'items');
+    const title = stringProperty(element, 'title');
     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>
+        <Card.Root data-scene-id={element.id}>
+            <Card.Body>
+                {title !== undefined && (
+                    <Card.Caption>
+                        <Card.Title>{title}</Card.Title>
+                    </Card.Caption>
+                )}
+                <Card.Content>
+                <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.Content>
+            </Card.Body>
+        </Card.Root>
     );
 }

package/theme/PrimeReactThemeFamily.ts

@@ -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.
+
+/**
+ * The `@primeuix/themes` preset families a PrimeReact 11 theme can be built on.
+ *
+ * PrimeReact 10 had no concept like this: a theme was a folder name and a compiled stylesheet, and the
+ * family it belonged to was a naming convention rather than anything the code could act on. In v11 the
+ * family is the actual unit of design - a JavaScript preset object supplied to `PrimeReactProvider` -
+ * and a Scene theme is that preset plus an accent color. Making it an enum rather than a string means a
+ * theme cannot name a family that does not exist, and `primeReactThemePreset` gets an exhaustive
+ * `switch` the compiler checks when PrimeTek adds a fifth family.
+ */
+export enum PrimeReactThemeFamily {
+    /**
+     * Aura - PrimeTek's flagship design language for v11, and the one their own documentation defaults
+     * to. Softer radii and a lower-contrast surface ramp than Lara.
+     */
+    Aura = 'aura',
+
+    /**
+     * Lara - the family Scene shipped throughout PrimeReact 10. Carried forward so an application
+     * upgrading from v10 can keep a recognisably similar look.
+     */
+    Lara = 'lara',
+
+    /**
+     * Nora - tighter spacing, squarer corners and heavier borders. The most compact of the four.
+     */
+    Nora = 'nora',
+
+    /**
+     * Material - PrimeTek's reading of Material Design, and the nearest thing v11 has to the v10
+     * `md-*` and `mdc-*` themes.
+     */
+    Material = 'material',
+}

package/theme/index.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './PrimeReactThemeFamily';
 export * from './themePresets';
 export * from './primeReactThemes';
-export * from './primeReactThemeStylesheet';
-export * from './applyPrimeReactTheme';
+export * from './primeReactThemePreset';
 export * from './usePrimeReactTheme';

package/theme/primeReactThemePreset.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 { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+import Lara from '@primeuix/themes/lara';
+import Material from '@primeuix/themes/material';
+import Nora from '@primeuix/themes/nora';
+import { PrimeReactThemeFamily } from './PrimeReactThemeFamily';
+import { themePresets } from './themePresets';
+
+/**
+ * A `@primeuix/themes` preset, as `PrimeReactProvider` wants it.
+ *
+ * `@primeuix/themes` types this as `Preset`, but the type is generic over the preset's own token shape
+ * and the four families do not share one instantiation, so naming the union here rather than importing
+ * `Preset` keeps the call sites free of casts.
+ */
+export type PrimeReactPreset = typeof Aura | typeof Lara | typeof Nora | typeof Material;
+
+/**
+ * The base preset object for each family.
+ *
+ * These are PrimeTek's own preset exports, untouched. The accent binding in
+ * {@link primeReactThemePreset} is applied on top with `definePreset`, which merges rather than mutates -
+ * important, because these objects are module singletons and two themes tinted differently must not
+ * fight over one shared object.
+ */
+const basePresets: Record<PrimeReactThemeFamily, PrimeReactPreset> = {
+    [PrimeReactThemeFamily.Aura]: Aura,
+    [PrimeReactThemeFamily.Lara]: Lara,
+    [PrimeReactThemeFamily.Nora]: Nora,
+    [PrimeReactThemeFamily.Material]: Material,
+};
+
+/**
+ * Presets are built once per theme name and reused.
+ *
+ * `definePreset` deep-merges, so calling it per render would produce a new object every time - and
+ * `PrimeReactProvider` treats a new preset identity as a theme change, which re-emits every `--p-*`
+ * custom property. Caching keeps switching themes cheap and, more importantly, keeps *not* switching
+ * free.
+ */
+const presetCache = new Map<string, PrimeReactPreset>();
+
+/**
+ * Resolves one of this package's themes to the `@primeuix/themes` preset that renders it.
+ *
+ * This is what replaced `primeReactThemeStylesheet` in the PrimeReact 11 port, and the change is the
+ * whole shape of theming in v11 in one function. A v10 theme was a *file*: the question was which URL to
+ * load, the answer was a string, and applying it meant swapping a `<link>`. A v11 theme is an *object*:
+ * the question is which preset to hand `PrimeReactProvider`, the answer is a value, and applying it
+ * means re-rendering a provider. Nothing is fetched, so there is no unstyled flash on switch and no way
+ * for a theme to 404.
+ *
+ * The accent is bound by overriding the preset's `primary` scale with a primitive color ramp the preset
+ * already ships - so `lara-light-teal` is genuinely Lara with Lara's own teal, not an approximation
+ * mixed here.
+ *
+ * @param themeName The theme name, as it appears in {@link themePresets}.
+ * @returns The preset, or `undefined` when this package ships no theme by that name. `undefined` rather
+ * than a default preset, because silently theming a screen as something other than what was asked for is
+ * harder to notice than nothing happening.
+ */
+export function primeReactThemePreset(themeName: string): PrimeReactPreset | undefined {
+    const cached = presetCache.get(themeName);
+    if (cached !== undefined) return cached;
+
+    const preset = themePresets.find((candidate) => candidate.name === themeName);
+    if (preset === undefined) return undefined;
+
+    const base = basePresets[preset.family];
+
+    // The ramp is looked up by name, so its type has to be widened to index the primitives and then
+    // narrowed again for `definePreset`. `ColorScale` is the shape every primitive color in a preset has -
+    // the 50..950 steps - and `primaryColor` is only ever one of those names, guaranteed by the catalog.
+    const primitives = base.primitive as unknown as Record<string, Record<string, string>>;
+    const ramp = primitives[preset.primaryColor];
+    const built = definePreset(base, { semantic: { primary: ramp } }) as PrimeReactPreset;
+
+    presetCache.set(themeName, built);
+    return built;
+}