@cratis/scene.primereact 1.1.0 → 3.0.0

package/menu/TieredMenu.tsx

@@ -0,0 +1,136 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { CSSProperties, HTMLAttributes, useState } from 'react';
+import { MenuItem } from '../MenuItem';
+import { MenuItemAction } from './MenuItemAction';
+import { MenuItemContent } from './MenuItemContent';
+
+const rootStyle: CSSProperties = {
+    background: 'var(--scene-surface-card)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+    color: 'var(--scene-text-color)',
+    width: 'fit-content',
+};
+
+const listStyle: CSSProperties = { listStyle: 'none', margin: 0, padding: 0, minWidth: '12rem' };
+
+const entryStyle: CSSProperties = {
+    background: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    textAlign: 'left',
+    textDecoration: 'none',
+    width: '100%',
+};
+
+const submenuStyle: CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    left: '100%',
+    zIndex: 1,
+    background: 'var(--scene-surface-overlay)',
+    border: '1px solid var(--scene-surface-border)',
+    borderRadius: 'var(--scene-content-border-radius)',
+};
+
+const separatorStyle: CSSProperties = { borderTop: '1px solid var(--scene-surface-border)', margin: 0 };
+
+/**
+ * The configuration {@link TieredMenu} takes.
+ */
+export interface TieredMenuProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The commands to show. Nesting is followed to any depth - each level opens beside its parent.
+     */
+    items?: MenuItem[];
+}
+
+/**
+ * A vertical menu whose submenus open to the side, to any depth. Cratis-owned.
+ *
+ * This exists because PrimeReact 11 removed `primereact/tieredmenu` outright, with no successor and no
+ * headless hook. The surviving `primereact/menu` parts can nest through `Menu.Submenu`, but only inside a
+ * popup anchored to a trigger; a tiered menu is an *inline* control that is already open, which those
+ * parts have no shape for. Rebuilding it as plain markup is both smaller and more honest than bending an
+ * overlay into standing still.
+ *
+ * Depth is the one thing this keeps unrestricted, because depth is the whole point of the component: each
+ * level renders the same way and holds its own open child, so an authored model nests as far as its
+ * author took it.
+ *
+ * What it deliberately does not carry over from the v10 `TieredMenu`: submenus open on click, never on
+ * hover; there is no roving-focus keyboard model with arrow keys walking levels, only the tab order the
+ * browser gives; the popup form (`popup` plus an imperative `toggle`) is gone entirely, since Scene only
+ * ever rendered the inline one; opening a deep branch does not flip the level to the other side when it
+ * would run off the viewport; and item templates are not supported.
+ */
+export function TieredMenu({ items = [], ...rest }: TieredMenuProps) {
+    return (
+        <div {...rest} style={rootStyle}>
+            <TieredMenuLevel items={items} />
+        </div>
+    );
+}
+
+/**
+ * The configuration one level of a tiered menu takes.
+ */
+interface TieredMenuLevelProps {
+    /**
+     * The entries at this level.
+     */
+    items: MenuItem[];
+}
+
+/**
+ * One level of a tiered menu, holding which of its own entries is currently expanded.
+ *
+ * Keeping the open entry per level rather than as one path in the root is what makes the recursion
+ * trivial: a level knows only about its own children, so it can render another of itself for them without
+ * threading an index path down and back.
+ */
+function TieredMenuLevel({ items }: TieredMenuLevelProps) {
+    const [openIndex, setOpenIndex] = useState<number | undefined>(undefined);
+
+    return (
+        <ul role='menu' style={listStyle}>
+            {items.map((item, index) => {
+                if (item.separator === true) return <li key={index} role='separator' style={separatorStyle} />;
+
+                const children = item.items ?? [];
+
+                return (
+                    <li key={index} role='none' className='relative'>
+                        {children.length > 0 ? (
+                            <>
+                                <button
+                                    type='button'
+                                    role='menuitem'
+                                    className='flex items-center gap-2 p-3'
+                                    style={entryStyle}
+                                    disabled={item.disabled}
+                                    aria-haspopup='true'
+                                    aria-expanded={openIndex === index}
+                                    onClick={() => setOpenIndex(openIndex === index ? undefined : index)}>
+                                    <MenuItemContent item={item} />
+                                    <i className='pi pi-angle-right' aria-hidden='true' />
+                                </button>
+                                {openIndex === index && (
+                                    <div style={submenuStyle}>
+                                        <TieredMenuLevel items={children} />
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <MenuItemAction item={item} role='menuitem' className='flex items-center gap-2 p-3' style={entryStyle} />
+                        )}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+}

package/menu/index.ts

@@ -1,6 +1,16 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './MenuItemContent';
+export * from './MenuItemAction';
+export * from './DockPosition';
+export * from './Menubar';
+export * from './MegaMenu';
+export * from './TieredMenu';
+export * from './Steps';
+export * from './TabMenu';
+export * from './PanelMenu';
+export * from './Dock';
 export * from './PrimeMenu';
 export * from './PrimeMenubar';
 export * from './PrimeBreadcrumb';

package/menuItems.ts

@@ -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 type { MenuItem } from 'primereact/menuitem';
+import { MenuItem } from './MenuItem';
 import { SceneElement } from '@cratis/scene.model';
 import { arrayProperty } from './properties';
 

package/messages/MessageGallery.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         layout: 'padded',
-        docs: { description: { component: 'The message family. `message` and `inlineMessage` share PrimeReact\'s Message component but mean different things on a screen - one is about a region, the other about the field beside it - and the width is the difference a reader sees.' } },
+        docs: { description: { component: 'The message family. `message` and `inlineMessage` share PrimeReact 11\'s singular `message` module but mean different things on a screen - one is about a region, the other about the field beside it - which v11 lets them say with `variant` as well as with width. The plural `messages` module was removed in v11; this package never declared a name for it. `toast` announces itself once on mount, grouped by the element\'s own id, because a Scene element has no other way to make an imperative call.' } },
     },
 } satisfies Meta<typeof SceneElementView>;
 

package/messages/PrimeInlineMessage.tsx

@@ -3,21 +3,52 @@
 
 import { Message } from 'primereact/message';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { stringProperty } from '../properties';
+import {severityProperty, stringProperty} from '../properties';
+
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * Deliberately duplicated from `PrimeMessage` rather than shared. Both adapters need it and neither needs
+ * the other, and lifting six lines into a module would put a helper nobody outside this folder wants into
+ * the package's public surface - `index.ts` re-exports everything a file exports.
+ *
+ * The icon is kept even for the compact variant, because severity is otherwise carried by color alone,
+ * and "the red one means you have to fix it" is not information a reader who cannot see the color gets.
+ */
+const severityIcons: Record<string, string> = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle',
+};
 
 /**
  * The `PrimeReact:inlineMessage` component - a short notice sitting beside the field it is about.
  *
  * The same PrimeReact `Message` as `message`, sized to its content instead of the row, so a validation
- * hint reads as belonging to one field rather than to the whole form.
+ * hint reads as belonging to one field rather than to the whole form. PrimeReact 11 gives that intent a
+ * name of its own - `variant='simple'` drops the panel and leaves the icon and the words - which is
+ * exactly what the v10 adapter was approximating with a width class, so the distinction survives the
+ * migration and lands on a real prop rather than on CSS.
+ *
+ * The v11 module is `primereact/message`, singular. The plural `messages` module - a list of notices
+ * driven imperatively - was removed with no replacement, but this package never declared a name for it,
+ * so nothing here is lost with it.
  */
 export function PrimeInlineMessage({ element }: RegisteredComponentProps) {
+    const severity = severityProperty(element, 'severity', 'info');
     return (
-        <Message
+        <Message.Root
             data-scene-id={element.id}
             className='inline-flex'
-            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}
-            text={stringProperty(element, 'text', '')}
-        />
+            variant='simple'
+            severity={severity as 'success' | 'info' | 'warn' | 'error'}>
+            <Message.Icon>
+                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />
+            </Message.Icon>
+            <Message.Content>
+                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>
+            </Message.Content>
+        </Message.Root>
     );
 }

package/messages/PrimeMessage.tsx

@@ -3,22 +3,49 @@
 
 import { Message } from 'primereact/message';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { stringProperty } from '../properties';
+import {severityProperty, stringProperty} from '../properties';
+
+/**
+ * The `primeicons` class that stands for each severity.
+ *
+ * PrimeReact 10 chose this icon for you; PrimeReact 11 made the icon a part you compose, which is right
+ * for an application - it can use its own icon set - and wrong for a Scene element, which has no way to
+ * name one. The mapping is restored here so a notice still reads at a glance rather than as an
+ * undifferentiated colored box.
+ */
+const severityIcons: Record<string, string> = {
+    success: 'pi pi-check-circle',
+    info: 'pi pi-info-circle',
+    warn: 'pi pi-exclamation-triangle',
+    error: 'pi pi-times-circle',
+};
 
 /**
  * The `PrimeReact:message` component - a block-level notice attached to a region of a screen.
  *
  * Rendered full width, which is what separates it from `inlineMessage`: the two share PrimeReact's
  * `Message` component but mean different things on a screen, and the width is the difference a reader
- * actually sees.
+ * actually sees. PrimeReact 11 adds a second axis for the same distinction - `variant` - and this one is
+ * the default, bordered variant, because a region-level notice is meant to be a block you notice.
+ *
+ * The v11 module is `primereact/message`, singular, which is the one that survived; the plural `messages`
+ * module - a list of notices with its own imperative API - was removed outright, and this package never
+ * declared a name for it.
+ *
+ * v10's `warning` is translated to v11's `warn` so screens written against the old vocabulary keep their
+ * color; `error` was and still is spelled the same here, unlike everywhere else in PrimeReact where the
+ * danger severity is called `danger`.
  */
 export function PrimeMessage({ element }: RegisteredComponentProps) {
+    const severity = severityProperty(element, 'severity', 'info');
     return (
-        <Message
-            data-scene-id={element.id}
-            className='w-full'
-            severity={stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error'}
-            text={stringProperty(element, 'text', '')}
-        />
+        <Message.Root data-scene-id={element.id} className='w-full' severity={severity as 'success' | 'info' | 'warn' | 'error'}>
+            <Message.Icon>
+                <i className={severityIcons[severity] ?? severityIcons.info} aria-hidden='true' />
+            </Message.Icon>
+            <Message.Content>
+                <Message.Text>{stringProperty(element, 'text', '')}</Message.Text>
+            </Message.Content>
+        </Message.Root>
     );
 }

package/messages/PrimeToast.tsx

@@ -1,29 +1,104 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { Toast } from 'primereact/toast';
+import { Toaster, toast, useToasterContext } from 'primereact/toaster';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { numberProperty, stringProperty } from '../properties';
+import {numberProperty, severityProperty, stringProperty} from '../properties';
+
+/**
+ * Renders whatever notifications are currently queued for the surrounding toaster.
+ *
+ * PrimeReact 11 splits a toast in two: a `Toaster` owns the queue, the position and the timers, and the
+ * caller decides what one notification looks like. Nothing renders until someone maps the queue, which is
+ * what this does - it has to be its own component because reading the queue means reading the toaster's
+ * context, and that context is only available below the `Toaster.Root` that provides it.
+ *
+ * The severity icons are chosen here rather than left out because `Toast.Icon` renders only when its
+ * `match` equals the toast's severity, so the four are alternatives, not four icons at once.
+ */
+function ToastList() {
+    const toaster = useToasterContext();
+    if (toaster === undefined) return null;
+
+    return (
+        <>
+            {toaster.toasts.map((item) => (
+                <Toast.Root key={item.id} toast={item}>
+                    <Toast.Icon match='success'>
+                        <i className='pi pi-check-circle' aria-hidden='true' />
+                    </Toast.Icon>
+                    <Toast.Icon match='info'>
+                        <i className='pi pi-info-circle' aria-hidden='true' />
+                    </Toast.Icon>
+                    <Toast.Icon match='warn'>
+                        <i className='pi pi-exclamation-triangle' aria-hidden='true' />
+                    </Toast.Icon>
+                    <Toast.Icon match='error'>
+                        <i className='pi pi-times-circle' aria-hidden='true' />
+                    </Toast.Icon>
+                    <Toast.Content>
+                        <Toast.Title />
+                        <Toast.Description />
+                    </Toast.Content>
+                    <Toast.Close aria-label='Dismiss'>
+                        <i className='pi pi-times' aria-hidden='true' />
+                    </Toast.Close>
+                </Toast.Root>
+            ))}
+        </>
+    );
+}
 
 /**
  * The `PrimeReact:toast` component - a transient notification in a corner of the screen.
  *
- * Toast is purely imperative: it renders nothing until someone calls `show`. A Scene element cannot make
- * that call, so the adapter makes it once on mount from the element's own properties. The element
+ * A toast is purely imperative: nothing renders until someone announces something. A Scene element cannot
+ * make that call, so the adapter makes it once on mount from the element's own properties. The element
  * therefore reads as "this screen announces this" rather than as a component that happens to render
  * nothing, which is what a literal wrapper would produce.
+ *
+ * PrimeReact 11 replaced v10's per-component ref and `show()` with a module-level queue and a free
+ * `toast()` function - a better arrangement for an application, since anything can announce without
+ * holding a ref, but a shared one. The element's own id is used as the toast's group so this toaster shows
+ * only what this element announced, and the announcement is withdrawn on unmount; without both, several
+ * `toast` elements on one screen would each show all of each other's notifications and leave them behind.
+ *
+ * `data-scene-id` sits on a wrapper rather than on the toaster, because the toaster renders through a
+ * portal to the end of the document: the identifying attribute would leave the position in the tree where
+ * the element was actually authored, which is where a design-time tool looks for it.
  */
 export function PrimeToast({ element }: RegisteredComponentProps) {
-    const toast = useRef<Toast>(null);
-    const severity = stringProperty(element, 'severity', 'info') as 'success' | 'info' | 'warn' | 'error';
+    const severity = severityProperty(element, 'severity', 'info');
     const summary = stringProperty(element, 'summary', '');
     const detail = stringProperty(element, 'detail', '');
     const life = numberProperty(element, 'life', 3000);
+    const group = element.id;
 
     useEffect(() => {
-        toast.current?.show({ severity, summary, detail, life });
-    }, [severity, summary, detail, life]);
+        const id = toast({
+            group,
+            severity: severity as 'success' | 'info' | 'warn' | 'error',
+            title: summary,
+            description: detail,
+            duration: life,
+        });
+        return () => toast.dismiss(id);
+    }, [group, severity, summary, detail, life]);
 
-    return <Toast ref={toast} data-scene-id={element.id} position={stringProperty(element, 'position', 'top-right') as 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'} />;
+    return (
+        <div data-scene-id={element.id}>
+            <Toaster.Root
+                group={group}
+                timeout={life}
+                position={stringProperty(element, 'position', 'top-right') as 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'}>
+                <Toaster.Portal>
+                    <Toaster.Region>
+                        <ToastList />
+                    </Toaster.Region>
+                </Toaster.Portal>
+            </Toaster.Root>
+        </div>
+    );
 }

package/misc/BlockUI.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { HTMLAttributes } from 'react';
+
+/**
+ * Configuration for {@link BlockUI}.
+ */
+export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the region is currently blocked. While this is `false` the component adds nothing but a
+     * positioned wrapper, so it is safe to leave mounted around content that is only occasionally busy.
+     */
+    blocked?: boolean;
+
+    /**
+     * Whether the mask covers the whole viewport rather than only the wrapped content. A long-running
+     * action that would leave the rest of the screen misleadingly usable wants the page; a panel
+     * refreshing its own data does not.
+     */
+    fullScreen?: boolean;
+}
+
+/**
+ * A region that greys itself out and stops accepting input while something is in flight.
+ *
+ * Cratis owns this component. PrimeReact 10 had `BlockUI`; PrimeReact 11 removed it with no replacement
+ * and no headless hook, and the `blockUI` name is one this package's manifest already publishes - screens
+ * are written against it. Rebuilding it here is what keeps that promise, and it turns out to be a small
+ * thing to own: the whole component is a positioned wrapper, an `inert` subtree and a translucent mask.
+ *
+ * Blocking is expressed twice on purpose, because the two audiences need different things. `aria-busy`
+ * tells assistive technology that the region's content is being updated and should not be announced as
+ * final. `inert` on the wrapped subtree takes it out of the tab order and stops it responding to clicks -
+ * without that, a mask is only a visual suggestion and a keyboard user tabs straight through it into
+ * controls the screen believes are unavailable.
+ *
+ * What it deliberately does not carry over from v10: the `template` and `containerTemplate` props (a
+ * screen that wants a spinner or a message over the mask composes one into the blocked content itself),
+ * the enter/leave transitions, `baseZIndex` / `autoZIndex` layering (the mask uses one fixed stacking
+ * level and does not negotiate with dialogs), and the `onBlock` / `onUnblock` callbacks - a Scene element
+ * has nowhere to route a callback to, and the blocked state is authored rather than discovered.
+ */
+export function BlockUI({ blocked = false, fullScreen = false, className, children, ...rest }: BlockUIProps) {
+    return (
+        <div {...rest} className={['relative', className].filter(Boolean).join(' ')} aria-busy={blocked}>
+            <div inert={blocked}>{children}</div>
+            {blocked && <div className={fullScreen ? 'fixed inset-0 z-50 bg-black/40' : 'absolute inset-0 z-10 bg-black/40'} />}
+        </div>
+    );
+}

package/misc/MiscGallery.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         layout: 'padded',
-        docs: { description: { component: 'The remaining components: indicators, badges, placeholders and a terminal. `terminal` accepts input and answers nothing until the hosting application subscribes to PrimeReact\'s TerminalService - responding to a command is application behavior, not something a Scene element can express.' } },
+        docs: { description: { component: 'The remaining components: indicators, badges, placeholders and a terminal. Two of them - `blockUI` and `scrollTop` - are Cratis-owned rebuilds, because PrimeReact 11 removed both with no replacement and no headless hook; they render here through the same registry as everything else, which is the point. `terminal` accepts input and answers nothing until the hosting application passes an `onCommand` callback - responding to a command is application behavior, not something a Scene element can express.' } },
     },
 } satisfies Meta<typeof SceneElementView>;
 

package/misc/PrimeAvatar.tsx

@@ -7,16 +7,27 @@ import { stringProperty } from '../properties';
 
 /**
  * The `PrimeReact:avatar` component - a person or entity shown as initials, an icon or a picture.
+ *
+ * PrimeReact 11 turned Avatar into a composition, and the split is the interesting part: `Avatar.Image`
+ * renders only once the browser has actually loaded the source, and `Avatar.Fallback` renders only while
+ * it has not. That is exactly the behavior a screen wants and could not previously express - a picture
+ * that 404s now degrades to the initials instead of leaving a broken image icon in a list of faces.
+ *
+ * The image part is left out entirely when no `image` was authored, rather than mounted with an empty
+ * source: it would spend an effect on a load that can never happen, and the fallback is what shows either
+ * way.
  */
 export function PrimeAvatar({ element }: RegisteredComponentProps) {
+    const label = stringProperty(element, 'label');
+    const icon = stringProperty(element, 'icon');
+    const image = stringProperty(element, 'image');
     return (
-        <Avatar
+        <Avatar.Root
             data-scene-id={element.id}
-            label={stringProperty(element, 'label')}
-            icon={stringProperty(element, 'icon')}
-            image={stringProperty(element, 'image')}
             size={stringProperty(element, 'size', 'normal') as 'normal' | 'large' | 'xlarge'}
-            shape={stringProperty(element, 'shape', 'square') as 'square' | 'circle'}
-        />
+            shape={stringProperty(element, 'shape', 'square') as 'square' | 'circle'}>
+            {image !== undefined && <Avatar.Image src={image} alt={label ?? ''} />}
+            <Avatar.Fallback>{icon !== undefined ? <i className={icon} aria-hidden='true' /> : label}</Avatar.Fallback>
+        </Avatar.Root>
     );
 }

package/misc/PrimeBadge.tsx

@@ -3,18 +3,30 @@
 
 import { Badge } from 'primereact/badge';
 import { RegisteredComponentProps } from '@cratis/scene.react';
-import { stringProperty } from '../properties';
+import {severityProperty, stringProperty} from '../properties';
 
 /**
  * The `PrimeReact:badge` component - a small count or status marker.
+ *
+ * PrimeReact 11 dropped the `value` prop in favor of children, which is why the authored value is placed
+ * inside the element rather than passed to it. The badge keeps rendering with no value at all - v11 marks
+ * that case `data-empty` and styles it as the bare dot a "there is something here" indicator wants.
+ *
+ * Two vocabulary changes are absorbed here rather than pushed onto screens. `warning` became `warn`, so a
+ * screen written against PrimeReact 10 keeps its color instead of silently falling back to the default.
+ * The `normal` size, on the other hand, is simply gone: v11 sizes are `small`, `large` and `xlarge`, and
+ * the unsized badge *is* the normal one, so nothing needs translating.
  */
 export function PrimeBadge({ element }: RegisteredComponentProps) {
+    // Tag and Badge are the two components PrimeReact 11 gives no `help` variant, so an authored
+    // `help` degrades to the default styling rather than failing to compile.
+    const severity = severityProperty(element, 'severity');
     return (
         <Badge
             data-scene-id={element.id}
-            value={stringProperty(element, 'value', '')}
-            severity={stringProperty(element, 'severity') as 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | undefined}
-            size={stringProperty(element, 'size') as 'normal' | 'large' | 'xlarge' | undefined}
-        />
+            severity={severity === 'help' ? undefined : severity}
+            size={stringProperty(element, 'size') as 'small' | 'large' | 'xlarge' | undefined}>
+            {stringProperty(element, 'value', '')}
+        </Badge>
     );
 }

package/misc/PrimeBlockUI.tsx

@@ -1,18 +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 { BlockUI } from 'primereact/blockui';
 import { RegisteredComponentProps } from '@cratis/scene.react';
+import { BlockUI } from './BlockUI';
 import { booleanProperty } from '../properties';
 
 /**
  * The `PrimeReact:blockUI` component - a region masked while something is in flight.
  *
- * In PrimeReact 11 this component is removed with no direct replacement.
+ * PrimeReact 11 removed `BlockUI` outright: no renamed module, no compositional replacement, no headless
+ * hook. The name is in this package's manifest and screens are authored against it, so the adapter now
+ * renders Cratis's own {@link BlockUI} instead. The element's contract is unchanged - a `blocked` flag and
+ * whatever the `content` slot holds - which is the point: the removal is a fact about PrimeReact, not
+ * something a screen should have to know.
+ *
+ * The default is `blocked`, because an element a screen bothered to place is there to say "this region is
+ * waiting"; an unblocked block is a wrapper that does nothing.
  */
 export function PrimeBlockUI({ element, slots }: RegisteredComponentProps) {
     return (
-        <BlockUI data-scene-id={element.id} blocked={booleanProperty(element, 'blocked', true)}>
+        <BlockUI
+            data-scene-id={element.id}
+            blocked={booleanProperty(element, 'blocked', true)}
+            fullScreen={booleanProperty(element, 'fullScreen', false)}>
             {slots.content}
         </BlockUI>
     );

package/misc/PrimeChip.tsx

@@ -1,21 +1,41 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { ReactNode } from 'react';
 import { Chip } from 'primereact/chip';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
 
 /**
  * The `PrimeReact:chip` component - a compact, optionally removable label.
+ *
+ * PrimeReact 11 replaced the `label` / `icon` / `image` / `removable` props with named parts, so the
+ * adapter is what decides that an authored image wins over an authored icon and that both sit in the
+ * leading `Start` slot. A screen can therefore only ever produce one leading adornment, which is the
+ * whole point of a chip: a second one turns it into a toolbar.
+ *
+ * `Chip.Remove` carries the removal behavior itself - clicking it hides the chip through the component's
+ * own state, so the adapter has nothing to wire. It renders a `span`, so the accessible name and button
+ * role are supplied here rather than left to a screen that has no way to reach the part.
  */
 export function PrimeChip({ element }: RegisteredComponentProps) {
+    const label = stringProperty(element, 'label');
+    const icon = stringProperty(element, 'icon');
+    const image = stringProperty(element, 'image');
+
+    let adornment: ReactNode;
+    if (image !== undefined) adornment = <img src={image} alt='' className='h-full w-full rounded-full object-cover' />;
+    else if (icon !== undefined) adornment = <i className={icon} aria-hidden='true' />;
+
     return (
-        <Chip
-            data-scene-id={element.id}
-            label={stringProperty(element, 'label')}
-            icon={stringProperty(element, 'icon')}
-            image={stringProperty(element, 'image')}
-            removable={booleanProperty(element, 'removable', false)}
-        />
+        <Chip.Root data-scene-id={element.id}>
+            {adornment !== undefined && <Chip.Start>{adornment}</Chip.Start>}
+            <Chip.Label>{label}</Chip.Label>
+            {booleanProperty(element, 'removable', false) && (
+                <Chip.Remove role='button' aria-label={label === undefined ? 'Remove' : `Remove ${label}`}>
+                    <i className='pi pi-times-circle' aria-hidden='true' />
+                </Chip.Remove>
+            )}
+        </Chip.Root>
     );
 }